What is a FavIcon?

11 March 2009

FavIcons are usually found on the address bar on your web browser.

Being on this website you should see a blue coloured "P" inside a black box in the address bar. That is the FavIcon for this website.

If you look down your bookmarked websites you're bound to see all kinda of FavIcons from various different websites.

A FavIcon will make your website stick out in a list.

FavIcons are 16x16 pixel images saved as a .ico file (icon) and uploaded to the web server.

Once uploaded you need to add the following 2 lines to any page you want to display the FavIcon on:
<link rel="shortcut icon" href="/images/favicon.ico" />
<link rel="icon" href="/images/favicon.ico" />

The href attribute needs to point to the location where you have uploaded the FavIcon to.

You will see the 2 tags above are practically the same, except one says "shortcut icon" and the other says "icon". This is because originally people used "shortcut icon" but as time has gone on web browsers also support "icon" and so some are thinking that in the future "icon" may take over from "shortcut icon".

To create a FavIcon I use an online tool where all I need is an image.

The online tool then takes my image, make it 16x16 pixels and then output the image in the correct .ico format.

The website I use is:
www.chami.com/html-kit/services/favicon/

http://www.peternichol.com/entry/trackback/47/

Please leave a comment using the form provided.