Generate a complete favicon package — all sizes, .ico file, and web manifest. Everything runs in your browser.
These sizes cover all modern platforms and devices.
| Size | Purpose | File name |
|---|---|---|
| 16×16 | Browser tab icon | favicon-16x16.png |
| 32×32 | High-res classic favicon | favicon-32x32.png |
| 48×48 | Older desktop browsers | favicon-48x48.png |
| 64×64 | Custom high-res favicon | favicon-64x64.png |
| 96×96 | High-resolution favicon | favicon-96x96.png |
| 180×180 | Apple touch icon (iOS) | apple-touch-icon.png |
| 192×192 | Android Chrome home screen | android-chrome-192x192.png |
| 512×512 | Android Chrome splash screen | android-chrome-512x512.png |
| 150×150 | Windows Live Tile | mstile-150x150.png |
| 270×270 | Microsoft Edge large icon | mstile-270x270.png |
Add these tags inside your <head>.
<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">Place all favicon files in a dedicated folder.
public/
└── favicons/
├── favicon.ico
├── favicon-16x16.png
├── favicon-32x32.png
├── favicon-48x48.png
├── favicon-96x96.png
├── apple-touch-icon.png (180×180)
├── android-chrome-192x192.png
├── android-chrome-512x512.png
├── mstile-150x150.png
├── mstile-270x270.png
└── site.webmanifest