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="" />

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="" />
<link rel="icon" type="image/gif" href="" />	

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 **

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