Favicon best sizes in 2026 — multi-size ICO + apple-touch-icon + SVG, the modern stack
Tomoda HinataTool author & maintainerPublished Apr 26, 202611 min read
‘favicon.ico’ used to be one 16×16 file in the root. The modern browser stack expects more: a multi-size ICO (16/32/48), an apple-touch-icon for iOS home screen, an SVG favicon for vector-perfect display at any size, and optionally a manifest icon set for PWA installs. The good news: every browser already knows what to do — your job is to ship the files in the right places.
Tools used in this guide
What sizes does the modern browser tab actually use?
Chrome and Edge render the tab favicon at 16×16 (standard density) or 32×32 (HiDPI). Firefox uses 16×16 or 32×32 depending on the platform's UI scale. Safari uses 16×16 in tabs, 32×32 in bookmarks. The Windows taskbar pinned site icon uses 48×48. A multi-size ICO containing 16×16, 32×32, and 48×48 covers every primary tab/bookmark/pinned-site rendering on desktop. Larger sizes (64, 128, 256) are for the manifest, not for the ICO.
Why the apple-touch-icon is non-optional
When an iOS Safari user taps ‘Add to Home Screen’, iOS looks for an explicit `apple-touch-icon` link tag. Without one, iOS rasterizes a thumbnail of the page itself — usually a low-quality screenshot of the top-left corner. Ship a 180×180 PNG via `<link rel="apple-touch-icon" href="/apple-touch-icon.png">` and iOS uses it directly. iOS adds rounded corners automatically, so design at full square — corners get masked.
SVG favicon — vector sharpness, free dark mode
Modern browsers (Firefox 41+, Chrome 80+, Safari 9+ via .svg-as-icon, Edge 80+) accept SVG favicons. The browser scales the vector to whatever size it needs — perfectly sharp on any screen. Put `<link rel="icon" href="/favicon.svg" type="image/svg+xml">` BEFORE the ICO link so modern browsers pick the SVG; older browsers fall back to ICO. Bonus: an SVG favicon can include a `<style>` block with `@media (prefers-color-scheme: dark)` rules — the icon flips to the dark variant when the user's OS is in dark mode, no JS.
PWA / manifest icon set
If your site is installable as a PWA, the web manifest needs a separate icon set: 192×192 for the Android home screen and 512×512 for the splash screen. These are referenced in `manifest.webmanifest`, NOT via `<link>`. They must be PNG (SVG in manifest icons has spotty support as of 2026).
The minimum modern setup, copy-pasteable
In your HTML head: 1) `<link rel="icon" href="/favicon.svg" type="image/svg+xml">`. 2) `<link rel="icon" href="/favicon.ico" sizes="any">`. 3) `<link rel="apple-touch-icon" href="/apple-touch-icon.png">`. 4) `<link rel="manifest" href="/manifest.webmanifest">` (if PWA). The ICO file should contain 16×16, 32×32, and 48×48 sub-images. The browser does the rest — no JS, no per-OS detection.
Steps
About 1 minDrop a square 512×512 master
Use a PNG (or SVG → PNG export at 512). The square is critical — non-square sources are letterboxed badly.
Generate the multi-size ICO
The tool produces an ICO containing 16×16, 32×32, 48×48 from your master.
Generate apple-touch-icon
Ships a 180×180 PNG with no rounded corners (iOS adds them automatically).
Drop in your site root
Put favicon.ico, favicon.svg, apple-touch-icon.png at the site root and reference them in the head as shown above.
| Asset | Size | Purpose |
|---|---|---|
| favicon.ico (16+32+48) | 5–8 KB | Tabs, bookmarks, pinned sites |
| favicon.svg | 1–4 KB | Vector-sharp tab icon, dark-mode aware |
| apple-touch-icon.png 180×180 | 8–15 KB | iOS home screen |
| icon-192.png | 10–18 KB | PWA Android home |
| icon-512.png | 25–60 KB | PWA splash |
Frequently asked questions
Do I still need favicon.ico if I have favicon.svg?
Yes — older browsers, some link previews (Slack, Discord), and a long tail of web crawlers expect ICO at /favicon.ico. Ship both.
Why 180×180 for apple-touch-icon and not 192?
180 is the iOS-native target size for high-resolution iPhone home screens. iOS will scale 192 down, but 180 is the precise match and avoids a re-scale.
Should I include a 64×64 in the ICO?
Optional. Some old IE versions rendered taskbar icons at 64. If your audience analytics show <0.1% IE, skip it.
How do I make the SVG favicon dark-mode aware?
Inside the SVG, add `<style>@media (prefers-color-scheme: dark) { .icon { fill: white; } }</style>` and use `class="icon"` on the relevant paths. The browser switches based on the OS theme.
Can the ICO have transparency?
Yes — modern ICO supports a per-sub-image alpha channel. Older XP-era ICO used a 1-bit mask which produced jagged edges; the modern 32-bit format avoids this.
Are my files uploaded?
No. The tool generates the multi-size ICO entirely in your browser via WebAssembly.
Try it now
Turn any image into a multi-size ICO file
ICO / Favicon Maker