Favicon Technical Reference Guide
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:
Touch icon for iOS 2.0+ and Android 2.1+:
<link rel="apple-touch-icon-precomposed" href="path/to/favicon-152.png">
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:
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">
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">
Create at least this:
|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:
|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:
|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|
|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|
|228x228||favicon-228.png||Opera Coast icon|
An .ico file is a container for multiple .bmp or .png icons of different sizes. In favicon.ico, create at least these:
|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|
|48x48||Windows site icons|
If you're obsessive and don't mind 1-3kb extra size, also include these sizes in your .ico:
|24x24||IE9 Pinned site browser UI|
|64x64||Windows site icons, Safari Reading List sidebar in HiDPI/Retina|
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 http://stackoverflow.com/questions/2208933/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">
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)