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