A favicon, also known as shortcut icon, website icon, page icon or urlicon is a small, square icon, usually 16×16px in size, that is displayed alongside the URL in the web address bar of a web browser.
The reason for using a favicon is branding. Most modern web browsers allow tabbed browsing. This means that a user can open several websites in the same browser window. A nice favicon design will distinguish your blog / website from the other websites.
Some modern browsers also allow favicons to be displayed in the Bookmarks section. Again, this will ensure your website will be distinguished from the others.
Favicon formats
The most widely used favicon format is .ico. Other favicon formats used are .gif and .png. You can also add an animated gif as a favicon, but this is currently only supported by Mozilla Firefox. Even though this is only supported by Firefox, there is the possibility of using multiple favicons. For example you can use an animated one which will display in Firefox and a static one which will display in the rest of the browsers.
Favicon Design
A favicon has a 16×16px size so to design it it’s advisable to use a larger size such as 128×128px and then scale it to 16×16px. For more information regarding the design process view our favicon design tutorial.
Implementation
Most browsers search by default for favicon.ico in the root folder of the website / blog the access. So it’s enough to place your favicon.ico in the root folder without adding additional code and the favicon will be displayed. However the code below should be used, especially if the favicon is not located in the root folder.
The code
Guidelines
Favicon Inspiration
 |
 |
 |
 |
 |
 |
 |
 |
Latest on zaBox
Sponsors
User Links Panel User Links Friends We recommend Sponsor
by 
February 20, 2008 at 11:19 am
Well, that’s a nice tip! Your icons looks great…
I always love to have my blog or site icons. It is also considered as a logo or identity for your site… 
February 20, 2008 at 6:12 pm
Yes!! It is great to see more articles on favicons, especially when they are well-written and informative like this one! Here is my slightly geekier take on the wonderful world of favicons, especially focused on branding and technical aspects. Hopefully, it will provide further benefit and help for your readers regarding favicons!
February 21, 2008 at 4:52 am
Wow. it’s good. thanks for that.
March 16, 2008 at 5:14 pm
I have noticed that favicon works as ico only under IE because when i use gif it don’t work on my ie
May 27, 2008 at 6:16 pm
How can I make the favicon roll from up to down?
May 27, 2008 at 6:35 pm
It’s not all that difficult. You just create an animated gif with the icon and instead of the standard ico file you make the favicon a gif. This blog uses a gif favicon. You can check out the code you need to inserd in the head tags by checkng the source code.
September 5, 2008 at 6:42 am
Hey good advice. I use SM Favicon Generator. This one works great and its fast.
December 26, 2008 at 7:48 am
I use free tool at animatedfavicon.com. This one works great and its fast