Favicon Technical Reference Guide

The HTML

Browser code (in most cases)

For the main favicon itself, it's best for cross-browser compatibility not to use any HTML. Just name the file favicon.ico and place it in the root of your domain.

This works in every desktop browser/version all the way back to IE6, except for SeaMonkey.

iOS, Android, and Windows mobile

If you want your site to have a unique icon when a user creates a shortcut to it on their mobile device screen, use 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. Internet Explorer Modern UI (formerly Metro) tile icon:

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

   Where #FFFFFF is the Windows tile color of your choice.

Icons for specific Apple devices and everything else

Here's how to specify favicons for particular Apple devices:

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: -->
   <lt;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:

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

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

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:

ICO File

An .ico file is a container for multiple .bmp or .png icons of different sizes. In favicon.ico, create at least these:

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

Create your .ico out of optimized .png files.

Forcing a Favicon Refresh

Not normally needed. This is only for those frustrating times when you can't get your favicon to refresh, during development:

• Clear the browser cache (Ctrl+F5 or Ctrl+Shift+R).
• Also close and reopen browser if IE.
• If still stuck, try opening new tab. Or see Stack Overflow: How do I force a favicon refresh?
• Temporarily add explicit HTML markup and append a query string. Remove this when you're done:

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

For large versioned deployments, if all site visitors need their favicon force-refreshed in an extreme situation:

• Add explicit HTML markup (customize the sizes part) and put your version number in the filename.

  <link rel="shortcut icon" href="/favicon-v2.ico" />
  <link rel="icon" sizes="16x16 32x32" href="/favicon-v2.ico">
          

Sources

The information on this site has been made available thanks to the following sources:

• "Understand the Favicon" by Jonathan T. Neal
• "favicon-cheat-sheet" by audreyr
• The World Wide Web Consortium (W3C)
• Wikipedia