Skip to content

Instantly share code, notes, and snippets.

@leommoore

leommoore/favicon.md

Created September 2, 2013 16:58
Show Gist options
  • Star 34 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save leommoore/6415005 to your computer and use it in GitHub Desktop.
Save leommoore/6415005 to your computer and use it in GitHub Desktop.
Download ZIP
Favicon Cheat Sheet
Raw
favicon.md

favicon-cheat-sheet

A painfully obsessive cheat sheet to favicon sizes/types. Compiled from:

The HTML

Basics


Insert into `<head>`:

    .. code-block:: html

        <link rel="icon" sizes="16x16 32x32" href="/path/to/favicon.ico">
        <!--[if IE]><link rel="shortcut icon" href="/path/to/favicon.ico"><![endif]-->

This is optimized for the best experience in every desktop browser:

 * Most browsers use the standard HTML5-style line 1.
 * IE 9 and below will use line 2, the inner part of which follows the spec in http://msdn.microsoft.com/en-us/library/ie/gg491740(v=vs.85).aspx
 * Note: IE 10 doesn't support conditional comments. There is no documentation
   on whether IE 10 has HTML5-style icon declaration support. TODO: verify
   whether IE 10 will use line 1.

Optional But Encouraged

You probably also want the following:

  1. Touch icon for iOS 2.0+ and Android 2.1+:

    .. code-block:: html

     <link rel="apple-touch-icon-precomposed" href="path/to/favicon-152.png">

  2. IE 10 Metro tile icon (Metro equivalent of apple-touch-icon):

    .. code-block:: html

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

    Replace #FFFFFF with your desired tile color.

Very Optional, for the Obsessive


If you're obsessive, you want all this too:

1. Largest to smallest apple-touch-icons:

    .. code-block:: html

        <!-- 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: -->
        <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:

    .. code-block:: html

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

ICO File
--------

An .ico file contains an icon at multiple 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
======= =======================================================================

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

======= =======================================================================
Size    Purpose
======= =======================================================================
48x48   Windows site icons (no specifics given by MSDN)
64x64   Windows site icons (no specifics given by MSDN)
======= =======================================================================

Helpful Tools
-------------

I haven't tried them all, so use at your own risk.

* MSDN recommends this web-based .ico creator: http://www.xiconeditor.com
* Resize favicons: http://faviconer.com
* More resizing: https://github.com/abrkn/icon
* Creating .ico files: http://www.imagemagick.org/Usage/thumbnails/#favicon
* Dynamically setting favicons: https://github.com/HenrikJoreteg/favicon-setter
* Fancy favicon tricks: https://github.com/component/piecon

Forcing a Favicon Refresh
-------------------------

* For yourself: 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

* For yourself and all site visitors: Append a query string. (TODO: find out if any
  browsers have problems with this.)

    .. code-block:: html

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

FAQ
---

**Why use png in addition to ico?**


**Is it true that favicons should be in the site root?**
No, that's only if you don't explicitly specify the browser/device-specific
`<link>` tags with a favicon path. See https://en.wikipedia.org/wiki/Favicon.ico.

**Is it true that the png has to be named favicon.png?**
No, this has never been true as far as I can tell from my obsessive research.

**Is it true that the ico has to be named favicon.ico?**
If you don't explicitly specify its `<link>` tag, yes. Explicitness is best,
so we both name it `favicon.ico` and explicitly specify the `<link>` tag.

**Why not prefix with "apple-touch-icon"?**
If you don't specify `<link>` tags, iOS looks for files prefixed with
`apple-touch-icon` or `apple-touch-icon-precomposed`. Many (e.g. HTML5
Boilerplate) rely on this assumption, but:

* Explicitly specifying `<link>` tags is clearer and supported by Apple.
* Not hard-coding names as `apple-touch-icon` clears up confusion as to whether
  the same icons can be reused for other purposes as-is, e.g. reusing
  favicon-144.png for Windows pinned site.

**Why use iOS precomposed icons?**

* iOS non-precomposed icons add rounded corners, drop shadow, and reflective
  shine. Sounds great in theory, but in practice the results can be very
  frustrating, especially to designers.
* Non-precomposed icons don't work with Android 2.1.

**Why absolute paths?**
Some Firefox versions require absolute paths. Since all browsers support them,
it's the simplest choice.

Contribute!
-----------

Send pull requests if you have anything to add/change, providing citations
and justification. I'd love to see this improve.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment