20

I'm confused about what's the simplest way to get favicons working on the majority of handsets and browsers.

1) Some sites suggest that it is enough to use:

<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-180x180.png">

That will work for iOS 8, and should be picked up by Android, BlackBerry, Windows, etc.

2) Other sites insist that every single possible favicon must be explicitly specified:

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/favicon-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/favicon-160x160.png" sizes="160x160">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<meta name="msapplication-TileColor" content="#000000">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">

3) This answer says that you just need:

<!-- For IE 9 and below. ICO should be 32x32 pixels in size -->
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->

<!-- Touch Icons - iOS and Android 2.1+ 180x180 pixels in size. --> 
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

<!-- Firefox, Chrome, Safari, IE 11+ and Opera. 196x196 pixels in size. -->
<link rel="icon" href="path/to/favicon.png">

Which of the above is going to cover the most browsers / handsets with the minimum amount of effort?

Community
  • 1
  • 1
Terence Eden
  • 14,034
  • 3
  • 48
  • 89
  • Check Wikipedia for more info: https://en.wikipedia.org/wiki/Favicon – gen_Eric Dec 22 '14 at 23:57
  • 7
    I'm the author of RealFaviconGenerator, the "solution 2" in your question. RFG doesn't pretend you *must* use all these icons and HTML code. Its rational is: if you want to support as many platforms as possible and given that everything is generated automatically for you (the purpose of RFG after all), well, you can just copy/paste all this in your site. Come on, it's already full of JavaScript and CSS! :) Yet you're not the first to frown at that many lines. Someday RFG will offer a lighter package. – philippe_b Dec 23 '14 at 20:56

1 Answers1

19

The code in solution 3 is correct but outdated. Precomposed Touch icons were deprecated in iOS 7 and Android Chrome does not support 196x196 icons anymore, but 192x192 (it really won't use anything above 192x192; full disclosure: I'm the author of this article).

So:

<!-- For IE 9 and below. ICO should be 32x32 pixels in size -->
<!--[if IE]><link rel="shortcut icon" href="/path/to/favicon.ico"><![endif]-->

<!-- Touch Icons - iOS and Android 2.1+ 180x180 pixels in size. --> 
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">

<!-- Firefox, Chrome, Safari, IE 11+ and Opera. 192x192 pixels in size. -->
<link rel="icon" href="/path/to/favicon.png">

If you can place favicon.ico in the root of the web site, you can even skip its declaration, since IE looks for /favicon.ico by convention.

philippe_b
  • 38,730
  • 7
  • 57
  • 59
  • 2
    Ditto on the thank you for RFG. A fantastic tool. I agree though, it would be even better if there were options to generate lighter packages. I'm not a fan of littering the root directory with 30 files just to offer fringe support for what is, after all, an entirely non-essential aspect of the site. – Kal Aug 28 '15 at 01:06
  • @Kal Thanks! I admit I'm not fond of cluttering my root directory either. Choosing to put files in a subdirectory is a good compromised. – philippe_b Aug 28 '15 at 08:46