What actually is a favicon?

This tutorial tries to explains everything related to the use of a Favicon on one's site.

What actually is a favicon?

A favicon, short for "favorites icon" is a tiny graphic icon present in your browser's address bar, favorites menu, bookmarks or even in your browsing history. It is also known as a shortcut icon, website icon, bookmark icon or simply an URL icon. Though a favicon is generally 16x16 pixels but greater dimensions(32x32 or 64x64) can be used as it would be autoscaled to 16x16 by all browsers.

Why should i use a Favicon?

You all would be thinking what difference would it make even if i dont use it at all. To this i would say, All good things come in small packets and this is apt in case of favicons as well. In my view it is the easiest way of branding a page. For an instance, just think how "Lary The Bird" represents twitter itself.
A site with a favicon is better Search Engine Optimised (SEO) than one without it. Its worth mentioning here that some browsers automatically checks for a favicon.ico file in the root folder of a site and if its unable to find it, the browser takes it as an error. So, its always better to place the file as "favicon.ico" in the root folder.
Moreover, it makes your page stand out from the cluttured Bookmarks and History list. Even news feeds and a majority of social sites have a method of extracting favicons from all external links.

Where can i get a favicon?

Basically, there are 3 ways of getting a favicon.
1. Getting a free ready-made favicon from various online resources.
There are plenty of favicons scattered around the web. You just require some efforts to choose the best suited one for your site. Dont worry, the list of Top 10 Ready-made favicon galleries on the web would help you to find it quickly.
2. Converting your logo or an image in to a favicon.
There are some good online favicon generators on the net which converts images in to favicons i.e .png or .gif to .ico format. You can choose the most suitable one for you from the Top 25 Online Favicon Generators handpicked by us.
3. Creating a favicon using photoshop.
If you are creative and have a bit of photoshop knowledge, you can go for creating an unique favicon for yourself. The detailed procedure of Creating a favicon using Adobe Photoshop would help you creating it smartly.

Where should i upload a favicon?

For Self Hosted Sites : The best place for uploading a favicon is the root folder of your site. Its always recommended to rename the file as "favicon.ico" instead of any shorts(like fav.ico).
For Non Self Hosted Sites : This basically includes your blogger or wordpress blog. For these, you need to upload your favicon to any of the top 5 image hosting sites.

How to use a favicon?

For Self Hosted Sites : You just need to include the below code in the head section of your site.

<link rel='shortcut icon' type='image/x-icon' href='/favicon.ico'/>

For Blogger : If you are a blogger, there is a complete tutorial on using a favicon on a blogspot blog with screenshots.
For Wordpress : Wp users can know all the three ways of adding a favicon to wordpress blog.

How to use an animated favicon?

Animated favicons are nothing but animated .gif icons in 16x16 resolution. These look nice but there are few problems associated with them. The article on 'Should i use an animated favicon instead of .ico one?' would help you make the right choice. If you still want to use them, rename the .gif icon to 'favicon.gif' and upload it in the root folder. After this just add the below code in head section of your site.

<link rel='icon' type='image/gif' href='/favicon.gif'/>

Though every care has been taken but if you still feel like asking, adding or commenting something, you are most welcomed!!