How to add favicon to your website

Quote of the post: "Favicon is the little logo that creates the image of a website for the internet surfers." - Quote about website - Sachin Gupta (Remember 'g' for google and 'Y!' for yahoo)

Before writing about how to create and add favicons (favorite icons or small logo for your site) to your website or blogger or word press domain. Just a few words about favicon, incase you don't know.
What is a Favicon?
Notice the red “Y!” symbol that appears in the left-most area of the address bar in Internet Explorer graphic below. I know you are familiar with it. Yup, that’s Yahoo’s favicon. These favicons (favorites icons), sometimes called “bookmark icons,” appear after adding a website with a favicon to the favorites menu in Internet Explorer and certain other browsers like Mozilla Firefox, Chrome etc.

Favicons also appear in the favorites menu after a page is added and loaded in the history as well. Anyone who’s surfed the Internet and bookmarked sites of interest has noticed favicons showing up in the favorites menu like this:

Creating a favicon:
A favicon should be 16 X 16 pixels with 16 colors and the file name should be favicon.ico. IconEdit32 is a good freeware program that allows you to create favicons as well as icons of other sizes and color depths. IrfanView is an excellent freeware image viewer that supports the icon (.ico) image format. You can use it to shrink one of your regular images to a 16 X 16 size, then decrease the colors to 16 and save as a “.ico” file. Keep in mind, if you don’t save it as “favicon.ico,” it may not work. Also remember, don’t just shrink an image to icon size and rename it with a “.ico” file extension. That won’t work either because it’s not a real icon file.

Uploading a Favicon on your website:
Method 1: Simply upload the file, favicon.ico to the root web directory of your hosted website with your favorite FTP program, Microsoft FrontPage, Dreamweaver MX or whatever. Make sure your favicon file is named “favicon.ico.” When someone bookmarks your site with a browser that supports favicons, your favicon will appear and will be stored in history as well. Alternatively, you can edit this code between the (x)HTML tags accordingly:

Method 2: I don't like 'Method 1' because it doesn't support on various browsers, and supports mainly static favicons. Rather I would prefer the easist way that supported most of the browsers and also supports animated favicons. For this you just have to search for 'Favicon hosting sites' and select or upload your own favicon. Copy and paste the generated code to the below section:
Layout -> Edit HTML -> Edit Template -> Put the code between (x)HTML tags accordingly:

That's it . You now have a distinct icon of your own blog or domain when someone bookmarks your website. You can even edit the favicons as well according to your choice.
There are many other sites, that generate and host favicons. Some of them are:
Iconj Animated Favicon
http://www.favicon.cc/
Favicon generator
Webscript Favicon generator
Testing of your new Favicon:

Typically when you save your template and reload it, you should be able to see the new favicon. But occasionally there may be settings in your browser that may prevent your favicon from showing up, so you may need to reload or clear your cache in order to see it right away. Now I am able to see my animated favicon on following browsers:

Mozilla

Chrome
Internet Explorer