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

Question

Which should I use:

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

Or:

<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?

Answer 1

OK, figured this out for myself...

rel

<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.

type

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

IE expects this to be served as MIME type image/vnd.microsoft.icon 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" />