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

83
votes

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

Please include:

  1. Which image formats are supported by which browsers.

  2. Which lines are needed in what places for the various browsers.

9
htmlstandardsfavicon
It might also be worth including the 'favicons' for the iPhone here as well; that is if the user chooses to add your website to their home screen. The code used in this case is as follows: <link rel="apple-touch-icon" href="touch.png" /> The dimensions should be 57x57 pixels. Alternatively you can omit the link tag and just put a file called 'apple-touch-icon.png' in the root directory of your website. – different
While you're at it, read this: mathiasbynens.be/notes/touch-icons – Zach Lysobey
Note that you'll need larger icons for iPad and retina iPhone displays. See Apple's guidelines: developer.apple.com/library/IOs/#documentation/… – Mike Ottum

9 Answers

109
votes

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

10
votes

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" />
6
votes

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.

4
votes

IE6 cannot handle PNGs correctly, be warned.

3
votes

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.

3
votes

There is also a site where you can check how the favicon of any page is made

getfavicon.org

There you can see a tutorial about making favicons, image types and resolutions, it's nice!

2
votes

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.

1
votes

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/