Favicon Cheat Sheet

Some tips & cheat for your favicon.

wave

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