CODEWITHSUNDEEP
htmlfavicon
Terence Eden
Terence Eden

Reputation: 14324

Minimum Viable Favicon Code

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?

Upvotes: 20

Views: 3672

Answers (1)

philippe_b
philippe_b

Reputation: 41318

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.

Upvotes: 19

Related Questions