The complete favicon size guide (and the snippet you actually need)
Stop second-guessing. Here are the exact files, sizes and HTML you should ship — and what you can skip.
Favicons should be simple. You want a little icon in the browser tab. But if you've ever searched "favicon sizes 2026" you've probably seen lists of 20+ files — .ico, .png, .svg, Apple Touch icons, Android Chrome manifests, Windows tile images, and more.
Here's the truth: you need far fewer than you think.
The minimum viable favicon set
For a modern website in 2026, you need exactly these files:
| File | Size | Purpose |
| ---------------------- | ------- | ---------------------------------- |
| favicon.ico | 32×32 | Legacy browsers, bookmarks |
| favicon.svg | any | Modern browsers (scales perfectly) |
| apple-touch-icon.png | 180×180 | iOS home screen |
| icon-192.png | 192×192 | Android Chrome, PWA |
| icon-512.png | 512×512 | PWA splash screen |
| site.webmanifest | — | PWA manifest linking the icons |
That's it. Six files cover 99.9% of real-world use cases.
The HTML you need
<link rel="icon" href="/favicon.ico" sizes="32x32" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />
Four lines. No msapplication-TileColor, no browserconfig.xml, no 16×16 fallback (the .ico file handles that).
What you can skip
- 16×16 PNG: The
.icofile already serves this size - Android Chrome 36×36, 48×48, 72×72, 96×96, 144×144: Only 192 and 512 matter for modern Android
- mstile images: Windows 8 era, no longer relevant
- safari-pinned-tab.svg: Deprecated in Safari 15+
- browserconfig.xml: Only used by IE/Edge Legacy
SVG favicons: the modern winner
If your icon works as an SVG (most logos do), it's the best primary favicon:
- Scales perfectly at any size
- Supports dark mode via
prefers-color-scheme - Smaller file size than a high-res PNG
- Works in Chrome, Firefox, Edge, Safari 15.4+
The .ico fallback handles the remaining edge cases.
The web manifest
{
"name": "Your App Name",
"short_name": "App",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
],
"theme_color": "#4f46e5",
"background_color": "#ffffff",
"display": "standalone"
}
Generating the complete set
Instead of manually resizing one image into five formats, you can use a favicon generator. Drop a square image (ideally 512×512 or larger) into our favicon generator and download a ZIP with all the files, the HTML snippet, and the web manifest — ready to drop into your project.
Quick checklist
- [ ] Square source image, at least 512×512
- [ ] Generate:
.ico,.svg, Apple Touch, 192, 512, manifest - [ ] Add the four
<link>tags to your HTML<head> - [ ] Test: open a new tab, check the favicon loads
- [ ] Test: add to home screen on iOS and Android
That's the whole process. No overthinking, no legacy cruft.