Blogger blogs have a default Blogger favicon and this is to show that the blog is using blogger platform.
But some blogger users want to brand their websites by adding their own custom logos and favicon.

In this post i will explain to you how you can add a favicon to your blogger blog and how simple it is.

What exactly is a Favicon?

A favicon stands for favorites icon, also known as a website icon, shortcut icon, url icon, or bookmark icon. It is a 16×16 pixel square icon associated with a particular website or webpage. Browsers that provide favicon support typically display a page’s favicon in the browser’s Address bar and next to the page’s name in a list of bookmarks.

Usually favicon has the extension .ico but Mozilla Firefox browser has added further support for favicons. So your favicons can have either of the following extensions .ico .png or .gif.

In order to add your favicon you should follow these steps:

Step I : Creating your own favicon

Favicons can be created by Image Manipulation softwares such as Photoshop and Gimp and just by selecting the dimensions to be 16 x 16.

For those who don’t have any knowledge about these softwares can convert their images to favicons by using these free services:

Favicongenerator.com
favicon.cc
Online fav-icon creator
FavIcon Generator
FavIcon from Pics
Genfavicon

Alternatively you can select a favicon from the image galleries provided by the following sites:

20 Free Favicon Icon Sets
free favicon
Favicons R Us
Free Favicons

You can upload your favicon on blogger by uploading it on any post and retrieving the link of the image or you can directly upload it on your picasa web albums.

Another option is to upload the image on google sites. Uploading on these websites is beneficial because they are hosted by google and therefore are more reliable.

Step II: Adding the image link to your blogger template

1. Go to Layout->Edit Html
2. Download Full Template (This is to backup your template)
3. Check the Expand Widget Templates
4. Search for the following code

</head>

5. Just above the code place the following code:

<link href=’Favicon-image-url‘ rel=’shortcut icon’/>
<link href=’Favicon-image-url‘ rel=’icon’/>

#Update
The above code was not working on internet explorer and google chrome. So i have updated the code. The new code will work on all the three major browsers.

Updated Code:

<link href=’Your-Favicon-Image-Url’ rel=’shortcut icon’ type=’image/vnd.microsoft.icon’/>

6. Replace Favicon-Image-Url by the link of the image.
7. Save the Template and you’re done.

Facing problems. Tell me!!