What is currently the best way to get a favicon to display in all browsers that support Favicons? [duplicate]

by

I go for a belt and braces approach here.

I create a 32×32 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.

  1. Place favicon.ico at your site root to support the older browsers (optional and only relevant for older browsers.
  2. Place favicon.png in my images sub-directory (just to keep things tidy).
  3. Add the following HTML inside the <head> element.
<link rel="icon" href="https://stackoverflow.com/images/favicon.png" type="image/png" />
<link rel="shortcut icon" href="https://stackoverflow.com/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

Leave a Comment