Favicon spec - 2026
What favicon sizes do you need in 2026?
Direct answer: six files and a snippet - favicon.svg, favicon.ico, one apple-touch-icon.png, PWA icons at 192 and 512, a maskable 512, and manifest.json. Everything below explains why each one earns its place, and why the legacy 16/32/57/72/96/144-size pile does not.
The minimal correct set
| File | Purpose | Why it's kept |
|---|---|---|
| favicon.svg | Vector favicon | One scalable source every modern browser reads directly - crisp at any tab size, and the only format that can carry a prefers-color-scheme media query for an automatic dark-mode variant. Ship it first in the <link> order so capable browsers prefer it. |
| favicon.ico | Multi-size ICO fallback | A single .ico can embed several raster sizes (16, 32, 48) in one file, and it is still what browsers fetch from /favicon.ico by convention when no <link rel="icon"> resolves - bookmarks bars, old shortcut pins, and RSS readers lean on this default. Keep it as the safety net, not the primary. |
| apple-touch-icon.png | iOS home-screen icon (180x180, opaque) | iOS composites this icon onto the home screen without applying your background for you - a transparent source renders with a black or white fill depending on system theme, which looks like a bug even though nothing is broken. Bake in an opaque background at generation time instead of shipping alpha. |
| icon-192.png / icon-512.png | PWA icons (purpose: any) | 192 covers the Android home-screen and app-switcher cases; 512 covers install prompts, splash screens, and app-store-style listings. Both are full-bleed - no safe-zone padding - because purpose: any icons are shown edge-to-edge or letterboxed, never cropped by an OS mask. |
| icon-maskable-512.png | Maskable PWA icon | Android, iOS, and desktop OSes each crop adaptive icons to their own shape - circle, squircle, rounded square - trimming roughly the outer 20% on every edge. A maskable icon keeps your mark inside the inner ~80% safe zone on a full-bleed background so no OS mask clips it. |
| manifest.json | Web app manifest | Declares name, short_name, the icon list with sizes/purpose, theme_color, and background_color so an installed PWA gets a real app identity instead of falling back to a screenshot-of-the-page icon. |
Maskable safe-zone sizing per the web.dev maskable icon guide; PWA manifest icons/purpose semantics per MDN's manifest icons reference; apple-touch-icon behaviour per Apple's Configuring Web Applications guide.
What to drop, and why
Older tutorials list twenty-odd files. Most target platform versions that no longer exist.
Separate 16x16 / 32x32 PNG favicons
Redundant once favicon.ico embeds both sizes and favicon.svg covers everything else. Extra requests, no capability gained.
The 57/72/96/114/120/144/152/167 apple-touch-icon set
A relic of iOS versions that each wanted a distinct pixel size for retina vs. non-retina, iPad vs. iPhone. Modern iOS scales a single 180x180 source cleanly - shipping eight files buys nothing but bytes.
mstile-*.png and browserconfig.xml
Windows 8/8.1 Start-screen live tiles. Windows 10 downgraded emphasis on them and Windows 11 dropped live tiles entirely - there is no live surface left to render into these assets.
msapplication-* meta tags
Paired with the tile assets above. Safe to omit unless you have a specific, verified Windows enterprise deployment target that still reads them.
How to add this to your site
- 1
Generate the set
Upload your SVG mark at the free favicon generator - no signup required.
- 2
Unzip into your static root
Extract favicon.svg, favicon.ico, apple-touch-icon.png, manifest.json, and the icons/ folder into your site root (or /public), preserving the icons/ path.
- 3
Paste the head snippet
Copy the generated <link>/<meta> tags into your document <head>, above other stylesheet or script tags so icon requests start early.
- 4
Verify in the browser
Open dev tools > Application > Manifest (Chrome) to confirm the manifest and icons resolve, and check the tab favicon at actual size rather than a zoomed screenshot.
- 5
Test the install / home-screen path
On iOS, add the page to the home screen and confirm the icon background is opaque. On Android/desktop Chrome, trigger the install prompt and confirm the maskable icon is not clipped oddly.
FAQ
Do I need browserconfig.xml or mstile icons in 2026?
No, unless you have a specific, verified Windows enterprise deployment that still reads them. Windows 11 dropped Start-screen live tiles, so there is no surface left to render mstile assets into for ordinary sites.
Does a favicon need to support dark mode?
It is optional but cheap: favicon.svg can carry a prefers-color-scheme media query internally so the tab icon adapts to the browser or OS theme. Browsers without SVG favicon support just fall back to favicon.ico.
Why does my apple-touch-icon look wrong on iOS?
iOS does not apply your background for you. If the source PNG has a transparent background, iOS fills it with black or white depending on system theme at composite time - bake in an opaque background instead of shipping alpha.
What's the actual difference between the 192, 512, and maskable 512 PWA icons?
192 and 512 (purpose: any) are shown full-bleed at different UI sizes - app switcher vs. install prompt/splash. The maskable 512 is a separate asset with your mark padded into the inner ~80% safe zone, because OS adaptive-icon masks crop the outer edge and would otherwise clip a full-bleed icon.
If I already ship favicon.ico, do I still need separate 16x16/32x32 PNGs?
No. A correctly built favicon.ico already embeds the 16, 32, and 48 sizes in one file. Separate same-size PNG favicons are redundant requests with no capability the ICO does not already provide.
Generate this exact set
Upload your SVG mark and the free favicon generator builds every file on this page from it, plus a 16px legibility check.
Product facts last reviewed by SVGnova engineering on .