Skip to content

Latest commit

 

History

History
220 lines (152 loc) · 8.66 KB

README.rst

File metadata and controls

220 lines (152 loc) · 8.66 KB
Raw

favicon-cheat-sheet

A painfully obsessive cheat sheet to favicon sizes/types. Compiled from:

The HTML

Basics

Insert into <head>:

<link rel="icon" sizes="16x16 32x32" href="/path/to/favicon.ico">
<!--[if IE]><link rel="shortcut icon" href="/path/to/favicon.ico"><![endif]-->

This is optimized for the best experience in every desktop browser:

  • Most browsers use the standard HTML5-style line 1.
  • IE 9 and below will use line 2, the inner part of which follows the spec in http://msdn.microsoft.com/en-us/library/ie/gg491740(v=vs.85).aspx
  • Note: IE 10 doesn't support conditional comments. There is no documentation on whether IE 10 has HTML5-style icon declaration support. TODO: verify whether IE 10 will use line 1.

Optional But Encouraged

You probably also want the following:

  1. Touch icon for iOS 2.0+ and Android 2.1+:

    <link rel="apple-touch-icon-precomposed" href="path/to/favicon-152.png">

  2. IE 10 Metro tile icon (Metro equivalent of apple-touch-icon):

    <meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="/path/to/favicon-144.png">

    Replace #FFFFFF with your desired tile color.

Very Optional, for the Obsessive

If you're obsessive, you want all this too:

  1. Largest to smallest apple-touch-icons:

    <!-- For iPad with high-resolution Retina display running iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/path/to/favicon-152.png">

<!-- For iPad with high-resolution Retina display running iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/path/to/favicon-144.png">

<!-- For iPhone with high-resolution Retina display running iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="/path/to/favicon-120.png">

<!-- For iPhone with high-resolution Retina display running iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/path/to/favicon-114.png">

<!-- For first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/path/to/favicon-72.png">

<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="/path/to/favicon-57.png">

  2. Favicons targeted to any additional png sizes that you add that aren't covered above:

    <link rel="icon" href="/path/to/favicon-32.png" sizes="32x32">

The Images

Create at least this:

Sizes Name Purpose
16x16 & 32x32 favicon.ico Default required by IE. Chrome and Safari may pick ico over png, sadly.

More about favicon.ico below. Yes, it's 1 file with multiple sizes.

If you also sort of care about iOS and Android but are lazy:

Size Name Purpose
152x152 favicon-152.png General use iOS/Android icon, auto-downscaled by devices.

But keep in mind that icons with complex detail often don't downscale well. Often you have to tweak subtle design details for smaller sizes.

If you're obsessive, create these too:

Size Name Purpose
32x32 favicon-32.png Certain old but not too old Chrome versions mishandle ico
57x57 favicon-57.png Standard iOS home screen (iPod Touch, iPhone first generation to 3G)
72x72 favicon-72.png iPad home screen icon
96x96 favicon-96.png GoogleTV icon
120x120 favicon-120.png iPhone retina touch icon (Change for iOS 7: up from 114x114)
128x128 favicon-128.png Chrome Web Store icon
144x144 favicon-144.png IE10 Metro tile for pinned site
152x152 favicon-152.png iPad retina touch icon (Change for iOS 7: up from 144x144)
195x195 favicon-195.png Opera Speed Dial icon

ICO File

An .ico file contains an icon at multiple sizes. In favicon.ico, create at least these:

Size Purpose
16x16 IE9 address bar, Pinned site Jump List/Toolbar/Overlay
32x32 New tab page in IE, taskbar button in Win 7+, Safari Read Later sidebar

If you're obsessive and don't mind 1-3kb extra size, also include these sizes in your .ico:

Size Purpose
48x48 Windows site icons (no specifics given by MSDN)
64x64 Windows site icons (no specifics given by MSDN)

Helpful Tools

I haven't tried them all, so use at your own risk.

Forcing a Favicon Refresh

  • For yourself: Clear the browser cache (Ctrl+F5 or Ctrl+Shift+R).

  • For yourself and all site visitors: Append a query string. (TODO: find out if any browsers have problems with this.)

    <link rel="shortcut icon" href="http://www.yoursite.com/favicon.ico?v=2" />

FAQ

Why use png in addition to ico?

Is it true that favicons should be in the site root? No, that's only if you don't explicitly specify the browser/device-specific <link> tags with a favicon path. See https://en.wikipedia.org/wiki/Favicon.ico.

Is it true that the png has to be named favicon.png? No, this has never been true as far as I can tell from my obsessive research.

Is it true that the ico has to be named favicon.ico? If you don't explicitly specify its <link> tag, yes. Explicitness is best, so we both name it favicon.ico and explicitly specify the <link> tag.

Why not prefix with "apple-touch-icon"? If you don't specify <link> tags, iOS looks for files prefixed with apple-touch-icon or apple-touch-icon-precomposed. Many (e.g. HTML5 Boilerplate) rely on this assumption, but:

  • Explicitly specifying <link> tags is clearer and supported by Apple.
  • Not hard-coding names as apple-touch-icon clears up confusion as to whether the same icons can be reused for other purposes as-is, e.g. reusing favicon-144.png for Windows pinned site.

Why use iOS precomposed icons?

  • iOS non-precomposed icons add rounded corners, drop shadow, and reflective shine. Sounds great in theory, but in practice the results can be very frustrating, especially to designers.
  • Non-precomposed icons don't work with Android 2.1.

Why absolute paths? Some Firefox versions require absolute paths. Since all browsers support them, it's the simplest choice.

Contribute!

Send pull requests if you have anything to add/change, providing citations and justification. I'd love to see this improve.