Add a custom favicon to your Blogger blog

Tweet

Update: Blogger added the option to add your own favicon under the design tab.

Blogger is a free, flexible and popular blogging platform, but every free blog comes with the same default favicon. Favicon is short a word for favorites icon, which is a 16×16 or 32×32 pixel icon related with a website or a blog.

Browsers, that support favicons will usually display a website's favicon in the address bar and also next to the page's name in the bookmarks list.

Browsers, that support tabs will also display the favicon next to the page title on each tab. Many Bloggers want to display their own favicon instead of Blogger's default favicon, in order to blend it with their blog template.

Creating a favicon

A favicon is a very small image, which is 16×16 pixels. Favicons are generally made with the .ico extension and it's also possible to use .gif and .png extensions.

The .ico format is what your favicon needs to be saved as. In fact your favicon actually needs to be named favicon also. This format allows your browser to read the image and to display it on your tab bar, bookmarks, address bar, history and other areas.

You can easily create your favicon using Photoshop. Surprisingly Photoshop doesn't already come with a .ico file type installed. You will need to download the .ico plugin in order to save .ico type files. With this plugin you can create icons for your desktop too. You can take your current images and downsize them to 16×16 or you can attempt to create your own from scratch. Sometimes it takes a while to mess with the image until it actually looks good at the 16×16 size. Since the space is really small, you will need to zoom in and out quite a bit until you get it just right. Once you have the image looking good at the small 16×16 size, go to 'File' > 'Save As' and save the image as favicon.ico

If you already have an image or logo for your blog, then it would be easy to make a favicon using one of the following sites:

• favicon.ico Generator
• Dynamic Drive- FavIcon Generator

You can also download a favicon from the following sites and just add it to your blog:

• Favicon Generator
• The Favicon Gallery
• MpP Favicon Gallery

Uploading your favicon

After selecting your favicon, you will need to upload this to a hosting account because Blogger does not host custom favicons. If you don't have your own web hosting account, there is a site called IconJ that will host your favicon for free.

If you have made favicon with .png, .jpg or .gif extension then you can simply upload your favicon to Blogger itself by clicking the image icon in the new post's toolbar, else you can use photo hosting services like Photobucket or ImageShack to upload .png, .jpg or .gif extensions only.

Adding favicon to your Blogger template

First you need to backup your blogger template. In your blogger dashboard, click on 'Design' > 'Edit HTML' and then click on 'download full template' and save your template.

1. Go to Blogger Dashboard > Design > Edit HTML.
2. Press CTRL+F to find the code </head>
3. Copy the below code by replacing FAVICON-URL with your favicon link, you have uploaded earlier to your hosting account.

<link href='FAVICON-URL' rel='shortcut icon'/>
<link href='FAVICON-URL' rel='icon'/>

4. Paste it on top of </head> this code.
5. Preview your template and if everything works fine, then save it.

You will see favicon only if you have bookmarked the blog you are viewing in Internet Explorer 6. Having a favicon for your blog increases your blog's identity.