Menu
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?
951
A favicon is added in the <head> tag of a web page. The <head> tag is where all the so-called “meta” information goes. Meta information is details about the web page itself, such as the title of the page.
To add a favicon to your website, either save your favicon image to the root directory of your webserver, or create a folder in the root directory called images, and save your favicon image in this folder. A common name for a favicon image is "favicon.ico".
png, . gif, or . jpg files and your favicon will work in most modern browsers, the lone exception being Internet Explorer, which only supports . ico format as of IE9.
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" />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With