Repository files navigation

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

• http://mathiasbynens.be/notes/rel-shortcut-icon <-- special thanks@mathiasbynens
• http://mathiasbynens.be/notes/touch-icons <-- special thanks@mathiasbynens
• http://www.jonathantneal.com/blog/understand-the-favicon/
• https://en.wikipedia.org/wiki/Favicon.ico
• http://snook.ca/archives/design/making_a_good_favicon
• http://www.netmagazine.com/features/create-perfect-favicon
• http://www.ravelrumba.com/blog/android-apple-touch-icon/
• http://msdn.microsoft.com/en-us/library/ie/gg491740(v=vs.85).aspx

For the main favicon itself, it's best for cross-browser compatibility not touse any HTML. Just name the file favicon.ico and place it in the root of yourdomain.[1][2]

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

You probably also want the following:

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

   <linkrel="apple-touch-icon-precomposed"href="path/to/favicon-180.png">

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

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

   Replace #FFFFFF with your desired tile color.

3. IE 11 Tile for Windows 8.1 Start Screen

   <metaname="application-name"content="Name"><metaname="msapplication-tooltip"content="Tooltip"><metaname="msapplication-config"content="/path/to/ieconfig.xml">

   ieconfig.xml

   <?xml version="1.0" encoding="utf-8"?>    <browserconfig>      <msapplication>        <tile>          <square70x70logosrc="/path/to/smalltile.png"/>          <square150x150logosrc="/path/to/mediumtile.png"/>          <wide310x150logosrc="/path/to/widetile.png"/>          <square310x310logosrc="/path/to/largetile.png"/>          <TileColor>#FFFFFF</TileColor>        </tile>      </msapplication>    </browserconfig>

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

1. Largest to smallest apple-touch-icons[3]:

2. Favicons targeted to any additional png sizes that you add that aren't covered above:

   <linkrel="icon"href="/path/to/favicon-32.png"sizes="32x32">

3. Favicon Chrome for Android

   <linkrel="shortcut icon"sizes="196x196"href="/path/to/favicon-196.png">

Create at least this:

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:

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:

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 sizesin your .ico:

Create your .ico out of optimized .png files.

TODO: get confirmation that IE9+ supports .ico files that contain .png files (issue#9)

Pinned tabs in Safari 9+ use an SVG vector mask for the favicon instead of any other PNG/ICO/etc. favicons that may be present. Vector artwork in the SVG file should be black only (no shades of black or other colors) with a transparent background. Also, a fill color needs to be defined in the <link> tag - a hex value or color shorthand will work. Here's the markup for adding the icon:

<linkrel='mask-icon'href='icon.svg'color='#ff0000'>

I recommend:

1. OptiPNG, to optimize .png files before putting them into an .ico:http://optipng.sourceforge.net/

2. ImageMagick, to create an .ico from .png files:http://blog.morzproject.com/convert-multiple-png-images-into-a-single-icon-file/ &http://www.imagemagick.org/Usage/thumbnails/#favicon

   $ convert favicon-16.png favicon-32.png favicon.ico

Others that I haven't tried:

• Favic-o-matic:http://www.favicomatic.com - A favicon generator that cares of .ico, .png and HTML code to make your website shine on every platform, browser or device
• Ubuntu/Debian package icoutil (Fedora packageicoutils) provides the program icotool which creates .ico from .png files.
• MSDN recommends this web-based .ico creator:http://www.xiconeditor.com
• Resize favicons:http://faviconer.com
• More resizing:https://github.com/abrkn/icon
• Dynamically setting favicons:https://github.com/HenrikJoreteg/favicon-setter
• Fancy favicon tricks:https://github.com/component/piecon
• Web Icon - a simple shell script that generates favicon and touch icons:https://github.com/emarref/webicon
• Icon Slate app (OS X):https://itunes.apple.com/us/app/icon-slate/id439697913
• png2ico wrapper for ImageMagick:https://github.com/bebraw/png2ico
• GIMP: export as .ico, each layer is saved as an image

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

• Clear the browser cache on Windows (Ctrl+F5 or Ctrl+Shift+R) and on Mac (Command + Shift + R).

• Also close and reopen browser if IE.

• If still stuck, try opening new tab. Or seehttp://stackoverflow.com/questions/2208933/how-do-i-force-a-favicon-refresh

• Temporarily add explicit HTML markup and append a query string. Removethis when you're done:

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

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

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

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

  TODO: find edge cases where this markup doesn't work (issue#3).

What about having both a default root favicon.ico and favicon.png?I think it's actually better to provide only favicon.ico and not favicon.png, because:

• An .ico is a container for multiple .bmp or .png files. If you specify 1 default favicon.png, and if that favicon.png overrides the favicon.ico, you are giving up control over how the favicon looks at different resolutions and allowing the browser to do all resizing. For example, you might want the 64x64 version to contain text and the 16x16 version to not display the text at all, since at 16x16 it would be unreadable anyway.

• There is no favicon.png in the HTML5 specification, just /favicon.ico. Fromhttp://www.w3.org/TR/html5/links.html#rel-icon:

  • 'In the absence of a link with the icon keyword, for Documents obtained over HTTP or HTTPS, user agents may instead attempt to fetch and use an icon with the absolute URL obtained by resolving the URL "/favicon.ico" against the document's address, as if the page had declared that icon using the icon keyword.'

More about this inhttp://stackoverflow.com/questions/1344122/favicon-png-vs-favicon-ico-why-should-i-use-pngs-instead-of-icos/1344379#1344379 (Note: the text in the chosen answer about alpha transparency is incorrect. See the 2nd answer.)

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. Seehttps://en.wikipedia.org/wiki/Favicon.ico.

If you don't have favicon.ico in the root consider adding one, or returning a HTTP 204 instead.Many tools and services e.g. bookmarking sites, feed readers, web crawlers etc., request afavicon.ico from the site root, and so receive a HTTP 404 if it's not present. In the worstcase some frameworks will return a custom error page which is likely to be many times largerthan the missing favicon.

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 withapple-touch-icon or apple-touch-icon-precomposed. Many (e.g. HTML5Boilerplate) 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 whetherthe same icons can be reused for other purposes as-is, e.g. reusingfavicon-144.png for Windows pinned site.

Why use iOS precomposed icons?

• iOS non-precomposed icons add rounded corners, drop shadow, and reflectiveshine. Sounds great in theory, but in practice the results can be veryfrustrating, 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.

Why not append a query string to force-refresh for all visitors?Some proxies and load balancers can fail to read query strings in edge cases.

Send pull requests if you have anything to add/change, providing citationsand justification. I'd love to see this improve.

Note on March 6, 2020: I'm behind on merging PRs but am slowly catching up.Bear with me while I get this repo caught up. ❤️