audreyfeldroy / favicon-cheat-sheet

Obsessive cheat sheet to favicon sizes/types. Please contribute! (Note: this may be in flux as I learn new things about favicon best practices.)

favicon-cheat-sheet

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

The HTML

Basics

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.³

Optional But Encouraged

You probably also want the following:

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

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

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

   <meta name="msapplication-TileColor" content="#FFFFFF">
   <meta name="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

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

   ieconfig.xml

   <?xml version="1.0" encoding="utf-8"?>
       <browserconfig>
         <msapplication>
           <tile>
             <square70x70logo src="/path/to/smalltile.png"/>
             <square150x150logo src="/path/to/mediumtile.png"/>
             <wide310x150logo src="/path/to/widetile.png"/>
             <square310x310logo src="/path/to/largetile.png"/>
             <TileColor>#FFFFFF</TileColor>
           </tile>
         </msapplication>
       </browserconfig>

Very Optional, for the Obsessive

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

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: -->
   <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="76x76" href="/path/to/favicon-76.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">

3. Favicon Chrome for Android

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

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
180x180	favicon-180.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)
76x76	favicon-76.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
128x128	smalltile.png	Small Windows 8 Star Screen 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)
180x180	favicon-180.png	iPhone 6 plus
195x195	favicon-195.png	Opera Speed Dial icon (Not working in Opera 15 and later)
196x196	favicon-196.png	Chrome for Android home screen icon
228x228	favicon-228.png	Opera Coast icon
270x270	mediumtile.png	Medium Windows 8 Start Screen Icon
558x270	widetile.png	Wide Windows 8 Start Screen Icon
558x558	largetile.png	Large Windows 8 Start Screen 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 icons5

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 icons6, Safari Reading List sidebar in HiDPI/Retina

Create your .ico out of optimized .png files.

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

SVG File

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:

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

Helpful Tools

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 package icoutils) 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

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

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

FAQ

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. From http://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 in http://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. See https://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 a favicon.ico from the site root, and so receive a HTTP 404 if it's not present. In the worst case some frameworks will return a custom error page which is likely to be many times larger than 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 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.

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.

Contribute!

Send pull requests if you have anything to add/change, providing citations and 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. ❤️

References

---

1. http://mathiasbynens.be/notes/rel-shortcut-icon↩

2. http://www.w3.org/TR/html5/links.html#rel-icon↩

3. http://mathiasbynens.be/notes/rel-shortcut-icon↩

4. Adapted from http://mathiasbynens.be/notes/touch-icons↩

5. No specifics given by MSDN.↩

6. No specifics given by MSDN.↩

favicon-cheat-sheet's Issues

"shortcut icon"

What is the rationale for having separate "icon" and "shortcut icon" link elements? The HTML5 specification has the following to say:

For historical reasons, the icon keyword may be preceded by the keyword "shortcut". If the "shortcut" keyword is present, it must be come immediately before the icon keyword and the two keywords must be separated by only a single U+0020 SPACE character.

So, it would be valid to only have one element with a rel of "shortcut icon", and no conditional comment. IE9 and under have no trouble ignoring the "sizes" attribute, right?

PNG in ICO

http://en.wikipedia.org/wiki/ICO_(file_format) states that ICO is a container for BMP and PNG but I couldn’t find any way to make an ICO with PNGs.

The problem with BMP that it does not really support compression.

Have you had any luck making ICOs with PNGs inside?

References to 'obsessive' inclusion of additional sizes

Only a minor point, and I didn't want to go in and edit myself, but with regards to the copy I would personally suggest removing the references to people being 'obsessive' for including additional sizes. It's not about how obsessed you are, it's about what your use-case is and the context. I think this wording discourages people from providing what are in many cases the appropriate favicons for the situation (and in 2017, that's a lot more than just an ico file).

Broken link in helpful tools

This link appears to be broken:
http://blog.morzproject.com/convert-multiple-png-images-into-a-single-icon-file/

apple-touch-icon-precomposed gets manipulated anyway if it includes alpha channel

Hi there,

Great repo! Working with this advice myself, I've noticed that my apple touch icons were being manipulated by iOS and the background turned black. This turned out to be because I was trying to use alpha channel transparency in those pngs - not allowed apparently! I had to create new icons and replace the transparency with a background color.I found this tool useful for my precomposing: http://www.gieson.com/Library/projects/utilities/icon_slayer

I'd recommend perhaps adding clarification on this point to the section on favicon generation.

Opera speed dial icon

For completeness (i don't actually use Opera) there is an icon size for Opera speed dial. From the attached article: "By default, the maximum icon size is 256 pixels wide by 160 pixels high."
Complete article: http://dev.opera.com/articles/view/opera-speed-dial-enhancements/

I was looking for a source for favicons and this might just be my savior. Sorry, I'd do a pull request like you said but I'm new to GitHub and don't understand it quite yet. I wouldn't want to give you more problems than solutions.

Above all, thanks for your work.

Additional IE10 Metro markup options

Great resource. I noticed that you included:

[meta name="msapplication-TileColor" content="#FF3300"]
[meta name="msapplication-TileImage" content="images\tileimage.jpg"]

Did you also want to include the various logo options?

[meta name="msapplication-square150x150logo" content="images/logo.png"]
[meta name="msapplication-square310x310logo" content="images/largelogo.png"]
[meta name="msapplication-square70x70logo" content="images/tinylogo.png"]
[meta name="msapplication-wide310x150logo" content="images/widelogo.png"]

Reference: http://msdn.microsoft.com/en-us/library/ie/dn255024(v=vs.85).aspx

Thanks
Russ

Update for Chrome on Android

Needs an update for Android's Chrome update. The apple-touch-icon has been depreciated.

<link rel="shortcut icon" sizes="196x196" href="nice-highres.png">
<link rel="shortcut icon" sizes="128x128" href="niceicon.png">

Add to Homescreen - Google Chrome Mobile — Google Developers

SVG Support

Any info about SVG support would be nice. Couldn’t find comprehensive info about this yet.

Add favicon generator www.favicon-generator.org

Hi

Here another greatfull generator compatible with all sizes described in README document

https://www.favicon-generator.org/

• Generates .png and .ico files for all sizes, 16px ... 192px compatible with Apple, Microsoft and Android PWAs.
• Also the corresponding manifest.json (Android) and browserconfig.xml (Microsoft) metadata files

I hope it's helpfully

Size 24x24 for "pinned site browser UI"

Source: http://msdn.microsoft.com/en-us/library/ie/gg491740(v=vs.85).aspx

Recommended: 16x16, 32x32, 48x48
Optimal: 16x16, 24x24, 32x32, 64x64

Wrong package name for icoutils

The Ubuntu/Debian package is named icoutils, not icoutil.

Web favicon

Broken netmagazine link

http://www.netmagazine.com/features/create-perfect-favicon

Couldn't find it anymore. So we should consider removing it.

optimal HTML template

would be cool if you had a boilerplate HTML template, something like: https://github.com/h5bp/mobile-boilerplate/blob/master/index.html#L13

it should be optimal with the intention of having developers commenting/removing what is not needed

Android 'Install to homescreen' link

Think this link would be worth adding in, but not sure where's best to add it? Maybe there should be an Android specific section?

https://developers.google.com/chrome/mobile/docs/installtohomescreen

Add MS Tile icon and Facebook Open Graph image?

Going beyond favicons and apple-touch-icons, you could add icon support for Windows 8 and Facebook sharing using this code:

<meta name="msapplication-TileImage" content="images/tile-144.png">
<meta name="msapplication-TileColor" content="#000000">
<meta property="og:image" content="images/web-clip-512.png">

Facebook Open Graph meta tags: https://developers.facebook.com/docs/opengraph/using-objects/

Pinned Sites in Windows 8: http://blogs.msdn.com/b/ie/archive/2012/06/08/high-quality-visuals-for-pinned-sites-in-windows-8.aspx

Add Favicon Generator

http://favicon.il.ly/

It follows the basics of the guide and also the optional icons. Creates a zip file for you to download and a template for jade and html.

Refreshing the favicon (docs addition)

In my experience, visiting the actual favicon link will also cause your browser to update it's cache.

1. Visit example.com and see old favicon
2. Update the favicon & redeploy
3. Visit example.com and still see old favicon
4. Visit example.com/favicon.ico to view the actual image in your browser
5. Visit example.com and see the new favicon

General References

It sounds a great check list. maybe adding it's link to the end for more connection be a good idea. maybe with the Title: "General References"
http://webdevchecklist.com/

Query strings not 100% effective

Query strings don't work in every edge case. The safest method is versioning in the path or filename. I've submitted pull request #15 to address this.

Determine IE10 Behavior

Right now there's a TODO in the cheatsheet to determine IE10 behavior. I was thinking we could use this enhancement as a place to post notes.

Real Favicon Generator

http://realfavicongenerator.net/

Hello add this cheat sheet to awesome-cheatsheet

Hello, we have indexd this cheat sheet to awesome-cheatsheet

Thank You !!! 🚀 🚀 🚀

Opera Coast Icons

The new browser from Opera for iOS will use larger images for icons:

<link rel="icon" href="$URL" sizes="228x228"/>

http://coastbyopera.com/developer, scroll all the way down to "Optimize your Coast web app image".

A source on ‘Retina-Caliber Favicons’.

I might do a pull if I have time later this week, but maybe someone else would like to handle this. To go along with #5, information could be taken from Gruber’s How to Create Retina-Caliber Favicons.

John talks about what applications he has tried and his experiences with them, as well as recommend a winning application: Marchand’s Icon Slate.

He also mentions an oddity with Apple’s favicon, which might need to be researched and added to the image tables for the sake of completion:

Theirs has four resources: two each at 16 and 32 px dimensions. […] The first two icons in Apple’s file use alpha channels, but the second two seem to have hard-coded anti-aliasing artifacts.

Contradiction on HTML tag

it's best for cross-browser compatibility not to use any HTML

vs

Explicitness is best, so we both name it favicon.ico and explicitly specify the tag.

So, should link tag be added or not?

No, this is not an issue. Just WOW!

It's just amazing to see this kind of repo in Github. Kudos to audreyr!

Great generator tool

I really don't know if it may help but in all case it's really a great favicon generator worth to look at!

http://realfavicongenerator.net/

ipad mini and ipad 2 use 76px icons in ios 7

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html

unless i'm reading it wrong

Strong recommendation - Image2Icon

I highly recommend Image2Icon (macOS app).

For Favicon, it will export the following:

Desktop Browers
16x16, 32x32 - Multisize ico
32x32 - Old Chrome versions
Mobile
57x57 - Non-Retina iOS, and Andriod 2.1+
72x72 - Secound generation iPad
114x114 - iPhone retina iOS ≤ 6
120x120 - iPhone retina iOS ≥ 7
144x144 - iPad retina iOS ≤ 6, IE10 Metro
152x152 - iPad retina iOS ≥ 7
180x180 - iPhone 6+
192x192 - Chrome for Android

You can also export for the following:

Folder
macOS Icon
iOS Icon
Android Icon
Favicon
Iconset

I don't work for them or anything. It's just what I use for icon anything. Everything I mentioned in this post is totally free, and you buy the full version it has a ton of other features.

Website & Appstore

add firefox os-style app icons

This could help adding it: https://developer.mozilla.org/en-US/docs/Web/Apps/Manifest?redirectlocale=en-US&redirectslug=Apps%2FManifest#icons

"Not a valid image" error when filename includes an ampersand

Uploaded image's filename can't include an ampersand or you'll get an error "Not a valid image".
Confusing, started to look what's a valid images then.

Edit Documentation

Would anyone mind if I propose to edit Readme.rst? I am taking a technical writing course in university and our assignment involves editing github project documentations to practice real world examples.
The goal is not to significantly change or completely remove any part of the technical information but to improve the structure of the writing, clarity and concision or fix smaller issues such as typos.
It will really help me out if you allow me to contribute, make a few changes and submit a PR. Thanks!

Favic-o-matic - Universal Favicon Generator

Coded and designed by me, this tool follows the useful informations found in this repository. Hope Audrey can feature it between resources :-)
Love from Italy
http://www.favicomatic.com

Unclear copy

This guide writes:

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 tags with a favicon path. See https://en.wikipedia.org/wiki/Favicon.ico.

But the goes on to say:

If you don't have favicon.ico in the root consider adding one, or returning a HTTP 204 instead.

I find this confusing. Should there be a favicon in the root or not? Can this be clarified?

Using ImageMagick

Hey! Nice work!

It might be worth noting that it's very easy to convert a PNG to ICO (with retina support!) using ImageMagick.

$ ls
favicon-32.png

$ convert favicon-32.png -resize 16x16 favicon-16.png

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

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

Animated Favicon

Hey I was wondering about animated GIF favicon. I saw that before in modern browsers. I'll do some research and try to do a pull request

Whoops, please ignore

Sizes for iPhone 6(S) Plus and iPad Pro

The iOS Human Interface Guidelines now include sizes for the iPhone 6(S) and iPad Pro. Here's the lot of them:

iPhone 6(S) Plus (@ 3x):    180x180
iPhone 4S, 5, 6, 6S (@ 2x): 120x120
iPad, iPad mini (@ 2x):     152x152
iPad 2, iPad mini (@ 1x):   76x76
iPad Pro (@ 2x):            167x167

Safari's pinned mask-icon, as modified in OS X 10.11

Hi, I found in GitHub's page itself a html element with the "mask-icon" attribute that I didn't know about.
This tutorial explains that it was introduced by Apple for Safari's pinned mask icons. There's already a pull-request on this topic, but it's outdated, as Apple eventually changed the syntax.
Quoting 1st paragraph:

With the release of Mac OS X 10.11, Safari finally got pinned tabs. While all other browsers use a site’s favicon for the pinned tab, Apple deemed that “not esthetically pleasing enough” and created a new type of icon for it, which they call a “mask-icon”. By default, they’ll use the first letter of your domain if you don’t have such an image. You need a black SVG image, a hover color and some time to do a tiny bit of coding.

Could you please integrate it in your document? I am new user and I'm not skilled in GitHub (unfortunately). Thanks. Graziano