What is currently the best way to get a favicon to display in all browsers that support Favicons?
favicon, html, standards
Solution
I go for a belt and braces approach here.
I create a 32x32 icon in both the `.ico` and `.png` formats called `favicon.ico` and `favicon.png`. The icon name doesn't really matter unless you are dealing with older browsers.
- Place `favicon.ico` at your site root to support the older browsers (optional and only relevant for older browsers.
- Place favicon.png in my images sub-directory (just to keep things tidy).
- Add the following HTML inside the `<head>` element.
<link rel="icon" href="/images/favicon.png" type="image/png" />
<link rel="shortcut icon" href="/favicon.ico" />
Please note that:
- The MIME type for `.ico` files was registered as image/vnd.microsoft.icon by the IANA.
- Internet Explorer will ignore the `type` attribute for the shortcut icon relationship and this is the only browser to support this relationship, it doesn't need to be supplied.
Reference
Problem
What is currently the best way to get a favicon to display in all browsers that currently support it? Please include: Which image formats are supported by which browsers. Which lines are needed in what places for the various browsers.