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:

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
228x228 favicon-228.png Opera Coast icon

ICO File

An .ico file is a container for multiple .bmp or .png icons of different 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
48x48 Windows site icons

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

Size Purpose
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:

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


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

  1. "Understand the Favicon" by Jonathan T. Neal
  2. "favicon-cheat-sheet" by audreyr
  3. Wikipedia
  4. The World Wide Web Consortium (W3C)
Copyright © 2006-2015 Favicon Generator. All rights reserved. Privacy policy