Tech Aspiration: Add a Favicon to your Blogger ( Blogspot ) Blog

I have always liked the little icons in front of websites in the browser address bar. When one adds a site as a bookmark or favorite, these icons make the site URL appear prominently in the favorites list. These icons are known as "favorite icons" or "favicons".

I have recently added one to my blog. The main advantage is that it gives the site a new identity and people who bookmark your site can easily look for your site in their favorites list.

To add favicon to your site you need to create one first or use a pre-existing icon. The most opted size of favicon is 16*16 pixel but you can also use 32*32 pixel size with .ico format. Some people use gif or png images. But I prefer a favicon with 16*16 pixel size and .ico format because this is standard supported by most browsers.

Steps to create/save a favicon
1. There are a number of sites for pre-existing icons. Download your favicon and save as image in jpg/gif/png format.

2. If you want to create your own favicon, you can create using any of the following sites.

favicon.ico generator In this site you can create dynamic and animated favicon using pixels.
FavIcon from Pics This site creates favicons from images. You can edit your images using an image editing software. Save your favicon.

3. Once your favicon is created you need to upload the .ico file to a hosting account. If you are domain site owner hosting on a server, upload the file in the root directory of your server. For blogspot blogs, you cannot upload the file to blogger root directory. It will simply reject. Other option is to look for free image hosting accounts. Google Page Creator is good but now google has stopped creating new google page accounts. If you already have a google page account then it is okay. Yahoo geocities does not support .ico files.

Other image hosting sites for .ico files are Ripway and MyFavatar (reference taken from BloggerBuster).

Add code to your template
1. First of all save your template.
2. Search for tag in your template. Place the code below just above the tag. Do not forget to change the code in red with your .ico file location and .ico file name.

Some copy the code after the title tag. See below.

Don't do this. Make sure that the code is placed just before the tag. Otherwise when your blog is loaded in the browser, the blogger favicon will overwrite your favicon and the blogger icon will be displayed in the browser. You can check this by seeing view source of your site after it is loaded in the browser. You will see two favicons loaded one of blogger and the other is your favicon. I faced this problem in firefox.

No other problem should come. Create a favicon and create identity and branding for your blogspot blog today.

Posted by Madhu on 11/22/2008 | Permalink
|