Main Content

Getting favicon to work - avoiding common pitfalls

Archive - Originally posted on "The Horse's Mouth" - 2005-12-14 14:52:28 - Graham Ellis

Ever wondered how to set up a "favicon" - one of those tiny logos that appear
in your "location" line of your visitor's browsers? Ever tried to do it and
found that - in spite of following all the instructions - it hasn't
worked. Yes, I've been there too - but you'll notice that "favicon"s are
now starting to appear on our web site!

What are the things you should know about "favicons" ... that will help you
to get them working on your site for as many of your visitors as possible.

1. The format for a "favico" is the .ico format ... originally a Microsoft
standard but now (slightly) more available. If you use a .png file it
will work on some browsers but not on others.

2. To work consistently, the image must be tiny - 16 pixels x 16 pixels.

3. Browsers cache icons and even clearing out the cache isn't guaranteed to
reset them - in fact it probably won't. I describe this as "supercaching"
and they do it because you want to come back to your bookmarks days, weeks,
months later. Which means that if you have a problem and fix it, it's
very unlikely you'll realise you've fixed it when you reload.

4. The original tag type for the link was "shortcut icon", but that didn't
conform to the standard and so it was sort of switched to "icon".

So it it little wonder that even we have had a few problems with this one!

My suggestion for putting up a favicon and getting it seen on the widest
variety of browsers in the quickest possible time (i.e how to also expire
supercaches)

1. Design the icon as a .png and CHECK that it's 16 x 16 pixels

2. Use a program such as png2ico to turn it into a .ico file

3. Give the .ico file a new name - do NOT call it favicon.ico (I've used whc.ico for ours)

4. Add the following two lines into each page's head block:

<link rel="icon" href="http://www.wellho.net/whc.ico" type="image/x-icon">
<link rel="shortcut icon" href="http://www.wellho.net/whc.ico" type="image/x-icon">