Keith Keith - 5 months ago 14
HTML Question

What's the optimal html link syntax to use for site icons/favions?

Which should I use:

<link rel="SHORTCUT ICON" type="image/x-icon" href="favicon.ico" />


<link rel="icon" type="image/ico" href="favicon.ico" />

I've seen both in use and both work in a lot of current browsers - but which is more consistently supported by the most browsers?


OK, figured this out for myself...


<link rel="icon" will work in IE8, 9, FX and Chrome but not in IE6 or 7. The rel="shortcut icon" is supported by IE6 & 7.

The W3C standards state a space delimited list and that the key is just icon. This means shortcut icon works in all browsers - handled incorrectly by IE and as a compound key in everything else.


All browsers appear to accept and handle the Windows icon format for the file.

IE expects this to be served as MIME type image/ but only seems to consistently work if the content type is image/x-icon.

Everything else expects image/ico but pretty much ignores it.

So the best format is:

<link rel="shortcut icon" href="favicon.ico" /> 

However if IE has problems handling the file or your server is not passing the image/x-icon content type in the headers it can help to specify the IE expected type:

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