What is currently the best way to get a favicon to display in all browsers that support Favicons?
HtmlStandardsFaviconHtml Problem Overview
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.
Html Solutions
Solution 1 - Html
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.
Solution 2 - Html
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 - Html
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.
Solution 4 - Html
Solution 5 - Html
IE6 cannot handle PNGs correctly, be warned.
Solution 6 - Html
Favicon must be an .ico file to work properly on all browsers.
Modern browsers also support PNG and GIF images.
I've found that in general the easiest way to create one is to use a freely available web service such as favicon.cc.
Solution 7 - Html
There is also a site where you can check how the favicon of any page is made
There you can see a tutorial about making favicons, image types and resolutions, it's nice!
Solution 8 - Html
Having a favicon.* in your root directory is automatically detected by most browsers. You can ensure it's detected by using:
<link rel="icon" type="image/png" href="/path/image.png" />
Personally I use .png images but most formats should work.
Solution 9 - Html
The answer to this question has become complicated enough that the best way is to just use a tool like RealFaviconGenerator, which lets you upload a png/jpg and then generates favicons and code to cover all the platforms for you: https://realfavicongenerator.net/