What is currently the best way to get a favicon to display in all browsers that support Favicons? [duplicate]
Solution 1:
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.icoat 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
.icofiles was registered as image/vnd.microsoft.icon by the IANA. - Internet Explorer will ignore the
typeattribute for the shortcut icon relationship and this is the only browser to support this relationship, it doesn't need to be supplied.
Reference
Solution 2:
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" />
Solution 3:
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:
- apple-touch-icon-57x57-precomposed.png
- apple-touch-icon-57x57.png
- apple-touch-icon-precomposed.png
- 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.