How To Make It Work: February 2007

Adding Custom Favicon to Your Blogger Blog

Favicon (pronounced fav-eye-con) is short for 'Favorites Icon.' A Favicon is a multi-resolution image included on nearly all professional developed sites. Within Internet Explorer the Favicon is displayed on the Address line and in the Favorites menu and can be clearly seen in Firefox bookmark. The Favicon allows the webmaster to further promote their site, and to create a more customized appearance within a visitor's browser. Very often, the Favicon reflects the look and feel of the blog or a representation of a company logo.

Actually there are a lot of resources online showing how to add Favicon but I thought of sharing my own method specifically for Blogger blogs which I used to set it up for mine.

To start off, you will need a graphic editing software such as Adobe Photoshop but if you don't, then download these wonderful free editors from Download.com:
1] IconEdit2
2] IrfanView
3] Paint.NET (download ICO plugin HERE)

If you do happen to have Photoshop, you might need to install the ICO Format Plugin which can be found here at Telegraphics.com.

If in the case you do not have a graphic editor or would prefer a very basic and simple way to make a Favicon, then visit DeGraeve.com for an online Favicon creator and editor.

Creating Your Favicon
The basic size to use is 16 x 16 pixel which is quite small to incorporate any creative ideas into it. Best way is to start with a larger square canvas to design and edit from before changing it it the required size. When you're done, make sure to save it in '.ico' format. If you are short of ideas, you can always browse through thousands of free favicons provided by Favicons R Us which you can edit it to your own taste as well.

Installing Your Favicon
Register a free account with Google Page Creator and upload your newly made Favicon as can be seen on the left image.

Then go login to your Blogger account, click on Edit Html in the Template tab and add in the following codes right after the <head> code:

<link href='http://youraccount.googlepages.com/favicon.ico' rel='shortcut icon'/>
<link href='http://youraccount.googlepages.com/favicon.ico' rel='icon'/>

Then save your template and view your blog. Usually it does not appear the very first time so just refresh it once and it should appear. Be creative and have fun!

Technorati Tags: favicon, adding favicon, blog design, optimize blog