Preview of Selected Image (Favicon):
Standard Favicon Sizes
For modern web applications, these sizes cover most device requirements:
| Size | Purpose | File Name |
|---|---|---|
| 16x16 px | Browser tab icon, classic favicon | favicon-16x16.png |
| 32x32 px | High-resolution classic favicon | favicon-32x32.png |
| 48x48 px | Older desktop browsers (optional) | favicon-48x48.png |
| 64x64 px | Custom high-res favicons (optional) | favicon-64x64.png |
| 96x96 px | High-resolution classic favicon | favicon-96x96.png |
| 180x180 px | Apple touch icon (iOS) | apple-touch-icon.png |
| 192x192 px | Android Chrome (recommended for Android home screen icons) | android-chrome-192x192.png |
| 512x512 px | Android Chrome high-resolution icon (used for splash screens) | android-chrome-512x512.png |
| 150x150 px | Windows "Live Tile" icon | mstile-150x150.png |
| 270x270 px | Microsoft Edge larger icons | mstile-270x270.png |
Link Tags for Including Favicons in HTML
To include these favicons in your HTML <head>, add the following:
<link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicons/favicon-48x48.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicons/favicon-96x96.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="192x192" href="/favicons/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/favicons/android-chrome-512x512.png">
<meta name="msapplication-TileImage" content="/favicons/mstile-150x150.png">
<meta name="msapplication-square270x270logo" content="/favicons/mstile-270x270.png">
<link rel="manifest" href="/site.webmanifest">Apple Touch Icon
For iOS devices, specify the apple-touch-icon to ensure the icon displays correctly on bookmarks:
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png">
Microsoft Tile Icons for Windows
For Windows devices, especially for pinned sites in Windows Start, use the Microsoft tile images:
<meta name="msapplication-TileImage" content="/favicons/mstile-150x150.png">
<meta name="msapplication-square270x270logo" content="/favicons/mstile-270x270.png">
Android Devices (Home Screen Icons)
The 192x192 px and 512x512 px icons are commonly used for Android devices:
<link rel="icon" type="image/png" sizes="192x192" href="/favicons/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/favicons/android-chrome-512x512.png">
Example Directory Structure
Organize all these files within a dedicated folder for easy management. A common folder structure might look like:
public/
└── favicons/
├── favicon-16x16.png
├── favicon-32x32.png
├── favicon-48x48.png
├── favicon-96x96.png
├── favicon-180x180.png
├── android-chrome-192x192.png
├── android-chrome-512x512.png
├── mstile-150x150.png
└── mstile-270x270.png