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

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.

  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="/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


I use .ico format and put the following two lines within the <head> element:

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

To also support touch icons for tablets and smartphones I prefer the approach of HTML5Boilerplate

More information on touch icons can be found in this article.

With the current status of browser-support you don't even have to add the HTML tag for the favicon in your document. The browsers will search automaticly a list of files, see this example for iOS:

If no icons are specified in the HTML, iOS Safari will search the website’s root directory for icons with the apple-touch-icon or apple-touch-icon-precomposed prefix. For example, if the appropriate icon size for the device is 57 × 57 pixels, iOS searches for filenames in the following order:

  1. apple-touch-icon-57x57-precomposed.png
  2. apple-touch-icon-57x57.png
  3. apple-touch-icon-precomposed.png
  4. apple-touch-icon.png

My advise is to not include a favicon in your document, but have a list of files ready in the root website:

  • apple-touch-icon-114x114-precomposed.png
  • apple-touch-icon-144x144-precomposed.png
  • apple-touch-icon-57x57-precomposed.png
  • apple-touch-icon-72x72-precomposed.png
  • apple-touch-icon-precomposed.png
  • apple-touch-icon.png (57px*57px)
  • favicon.ico HiDPI (32x32px)

When you download a template from html5boilerplate.com these are all included, you just have to replace them with your own icons.

Tags:

Html

Favicon

Standards

Recent Posts