Reference ❯ Icon Reference Chart ❯ Favicons
The quick version
As a minimum, you should always use a favicon.ico file in the root of your site, with both 16 × 16px and 32 × 32px resources. If that's all you do, the link tag isn't required, but it's still good practice to use it:
<link rel="icon" type="image/x-icon" href="http://example.com/favicon.ico" />
If you want to use anything other than .ico it has be linked to explicitly (I recommend using .ico though, to support several sizes in one file):
<link rel="icon" type="image/png" href="http://example.com/favicon.png" />
<link rel="icon" type="image/gif" href="http://example.com/favicon.gif" />
It's up to you what (if any) other platforms you want to support! For example if the favicon is for a web app (rather than just a site) you may want to make sure all favicons are covered.
| Sizes (px) | Format and naming | Notes |
|---|---|---|
General Favicons |
||
|
16 × 16 24 × 24 * 32 × 32 64 × 64 ** |
favicon.ico | While it can be useful to support multiple sizes other than 16px, these are optional. *IE9 Pinned site browser**Windows site icons, Safari Reading List |
| 72 × 72 | apple-touch-icon-72x72-precomposed.png | iPad |
| 96 × 96 | favicon.png | Google TV Favicon |
| 120 × 120 | apple-touch-icon-120x120-precomposed.png | iPhone (Retina) |
| 144 × 144 | pinned.png | Windows 8 Pinned Site Tile |
| 152 × 152 | apple-touch-icon-152x152-precomposed.png | iPad (Retina) |
| 228 × 228 | favicon-coast.png | Opera Coast Browser (iPad) |
Markup for Multiple icons
If you want to keep things simple, just use 152 × 152px large icon for both Android and iOS, but scaling may not be optimal.
<!-- Standard Favicon -->
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<!-- For iPhone 4 Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png">
<!-- For iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png">
<!-- For iPhone: -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png">
<!-- For Windows 8: -->
<meta name="msapplication-TileImage" content=“pinned.png”>
<meta name="msapplication-TileColor" content="#ef0303”>
<!-- For Opera Coast: -->
<link rel="icon" href="favicon-coast.png" sizes="228x228">See Chapter 3 of The Icon Handbook for more detail on favicons
