Special Post: How to Add Favicons to Blogger Blogs?

Here is a special blog post for you. Since two days ago, you may be seeing the new tiny icon appearing on the address bar of your browser when you load this blog. This icon is known as favorite icon or favicon. This is a distinguishing feature of almost every website.

While it is very easy to add a favicon into self-hosted blogs, it is not so in case of free hosts like Blogspot blogs. The procedure is entirely different. In Blogger, you have access only to the blog layout and no file upload features. In this case, adding a favicon to your Blogspot blog requires a workaround. Here is the step-by-step procedure for that.

1. Create Your Own Favicon

The first step of adding the favicon is creating your own unique favicon file. The favicon is a very small icon file with ‘.ico’ extension. Use one of these online services to create your favicon:

http://www.favicon.cc/

http://www.rw-designer.com/online_icon_maker.php

http://www.html-kit.com/favicon/

http://tools.dynamicdrive.com/favicon/

You can either upload an image file (in JPG, PNG, or GIF) and get it converted to a favicon or draw your own favicon.

My favicon was drawn, with a clear concept (see below) with the service from:

http://www.degraeve.com/favicon/

I loved their paintbrush interface to draw colors into the square columns.

2. Upload the Icon File

Once you have your favicon ready, upload it to a web location, from where it can be accessed by Blogger. Remember, icon file is a small image file with ‘.ico’ extension. But, it cannot be uploaded to Flickr as an image. It is worthless to upload to Rapidshare or any such file sharing systems. So, what I did was create a free webpage with Googlepages, and upload the file there.

For that, you have to sign up in Googlepages and create a free web space there (here is my site: lenxworld.googlepages.com). In this account, you have the privilege to upload any sort of files as in self-hosted blogs. Here is the screenshot of the file upload feature.

3. Add This Script to Your Blog

As the third step, in your Blogger profile, go to layout and click ‘Edit HTML’. Then, just add the following code after your code’s title tag:

<link href='Your Icon URL' rel='shortcut icon'
type='image/vnd.microsoft.icon'/>

On adding this script, please replace the Your Icon URL with the correct URL of your favicon.

Once you have this script ready, save the template and check the website, your favicon should be loading fine.

I tested my site with Mozilla Firefox, Internet Explorer, and Opera. In all, the favicon is showing just fine. In case of IE, the favicon load time (for CuteWriting) is rather long, but it is only a special case. In case of IE engine loaded within Firefox, the favicon doesn’t work for any website.

Thanks to Tips for new bloggers article, which formed the basis of this tutorial.

About My Favicon

As you see, my favicon consists of four colors on a black background. It is meant as a symbol of cooperation to spread the light of knowledge. Materialistically, it is the confluence of the basic colors, blue, green, and red to form white.

Now let’s get to its envisioned meaning. Blue emanating from the bottom represents my this blog, CuteWriting. It is a contribution to the good of the society. The green from the side is the general acceptance to the blog—my readers who support me. The red from above is the healthy criticism I receive (intended to be coming against blue). All these three colors congregate to form the white line, which is the bright light of wisdom and knowledge.

The white light proceeds from there, and lights all the way through the society. We are working together to make the world a better place. So, it basically means that your contributions and criticisms are required for the success of this quest for knowledge.

Copyright © Lenin Nair 2008