Favicon Cheat Sheet

Some tips & cheat for your favicon.


From the basics

The best way to implement favicon itself is name the file favicon.ico and place it in the root folder of you website, eg: https://yourwebsite.com/favicon.ico. This way works in most modern browser and legacy browsers

To the advances

The favicon may have many way options for some special case:

1. IE 10 Metro title icon:

<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="/icons-path/ms-icon-144x144.png">

2. Touch icon for iOS and Android:

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

3. Favicon Chrome for Android:

<link rel="icon" type="image/png" href="/android-icon-144x144.png" sizes="144x144" />

4. Addition png sizes for browsers:

<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />

Images purpose explanation

Sizes Name Purpose
57x57 apple-icon-57x57.png Apple Icon
60x60 apple-icon-60x60.png Apple Icon
72x72 apple-icon-72x72.png Apple Icon
114x114 apple-icon-114x114.png Apple Icon
76x76 apple-icon-76x76.png Apple Icon
120x120 apple-icon-120x120.png Apple Icon
152x152 apple-icon-152x152.png Apple Icon
180x180 apple-icon-180x180.png Apple Icon
320x460 apple-startup-320x460.png Use for Apple Startup Image
640x920 apple-startup-640x920.png Use for Apple Startup Image
640x1096 apple-startup-640x1096.png Use for Apple Startup Image
748x1024 apple-startup-748x1024.png Use for Apple Startup Image
750x1024 apple-startup-750x1024.png Use for Apple Startup Image
750x1294 apple-startup-750x1294.png Use for Apple Startup Image
768x1004 apple-startup-768x1004.png Use for Apple Startup Image
1182x2208 apple-startup-1182x2208.png Use for Apple Startup Image
1242x2148 apple-startup-1242x2148.png Use for Apple Startup Image
1496x2048 apple-startup-1496x2048.png Use for Apple Startup Image
1536x2008 apple-startup-1536x2008.png Use for Apple Startup Image
144x144 msapplication-TileImage-144x144.png IE Metro tile
70x70 msapplication-square70x70logo-70x70.png IE Metro tile
150x150 msapplication-square150x150logo-150x150.png IE Metro tile
310x150 msapplication-wide310x150logo-310x150.png IE Metro tile
310x310 msapplication-square310x310logo-310x310.png IE Metro tile
32x32 favicon-32x32.png Android icon
36x36 android-icon-36x36.png Android icon
48x48 android-icon-48x48.png Android icon
72x72 android-icon-72x72.png Android icon
96x96 android-icon-96x96.png Android icon
144x144 android-icon-144x144.png Android icon
192x192 android-icon-192x192.png Android icon
96x96 favicon-96x96.png Android icon
16x16 favicon-16x16.png Android icon