How to favicon sizes, formats, and browser support — complete reference
- Step 1Identify the surfaces you target — Tabs always; iOS home screen if you want a polished add-to-home; PWA if you have a manifest and service worker; legacy/enterprise if your analytics show old browsers. Each surface dictates which sizes you keep.
- Step 2Generate the full set — Run your SVG through Favicon Master. You get all thirteen sizes plus the ICO, SVG, and manifest in one ZIP — a superset of what most sites need.
- Step 3Keep the load-bearing sizes — Essentials: the ICO (16/32/48), a 32px tab PNG, the 180px apple-touch-icon, and 192/512 for PWA. The mid sizes (57/76/96/120/144/152/167) are legacy Apple/Android touch sizes — harmless to keep, safe to drop on a simple site.
- Step 4Build the link block — Copy the
<link>set fromREADME.html: ICO, SVG, PNG 16/32, apple-touch 180, and the manifest. That covers tabs, iOS, modern browsers, and PWA in one block. - Step 5Add anything the tool skips — If you need a Windows Start tile, author
browserconfig.xmland a 150px PNG by hand. If you want a polished Android install icon, add a maskable variant to the manifest. The generator produces neither. - Step 6Validate the set — Check the tab at 16px, the
/favicon.icorequest in the network panel, the iOS add-to-home flow, and the manifest in DevTools → Application. Each confirms a different size is wired correctly.
Every size in the generated set
The thirteen PNG sizes Favicon Master produces, mapped to purpose. The set is fixed — the tool has no size options.
| Size (px) | Primary purpose | In favicon.ico? |
|---|---|---|
| 16 | Tab favicon (low DPI) / ICO frame | Yes |
| 32 | Tab favicon (standard) / ICO frame | Yes |
| 48 | Windows site icon / ICO frame | Yes |
| 57 / 76 / 120 / 152 / 167 | Legacy iPad/iPhone touch icon sizes | No |
| 96 / 144 | Older Android / Windows tile densities | No |
| 180 | Apple touch icon (current iOS) | No |
| 192 | PWA manifest icon (Android home screen) | No |
| 512 | PWA manifest icon (splash/store) | No |
Formats and link tags the tool emits
The four moving parts of the generated package and the tag that wires each one.
| Format / file | Sizes | Link tag |
|---|---|---|
favicon.ico | 16, 32, 48 (in one container) | <link rel="icon" href="/favicon.ico" sizes="any"> |
<stem>.svg | scalable | <link rel="icon" type="image/svg+xml" href="/<stem>.svg"> |
icon-16.png / icon-32.png | 16, 32 | <link rel="icon" type="image/png" sizes="16x16|32x32" …> |
icon-180.png | 180 | <link rel="apple-touch-icon" sizes="180x180" …> |
manifest.json | references 192 + 512 | <link rel="manifest" href="/manifest.json"> |
Cookbook
Quick reference snippets for the common setups.
Minimum viable favicon set
For a simple non-PWA site, you can drop the legacy mid-sizes and keep just the essentials.
Keep: favicon.ico (16/32/48) favicon.svg (modern tab) icon-32.png (PNG tab fallback) icon-180.png (iOS home screen) Drop (optional): icon-57/76/96/120/144/152/167.png manifest.json + icon-192/512 (only needed for a PWA)
Full PWA-ready head
Everything wired, matching the generator's README output.
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" type="image/svg+xml" href="/favicon.svg"> <link rel="icon" type="image/png" sizes="32x32" href="/icon-32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/icon-16.png"> <link rel="apple-touch-icon" sizes="180x180" href="/icon-180.png"> <link rel="manifest" href="/manifest.json">
Inside the ICO
Only three sizes go into the ICO; the rest stay as standalone PNGs.
favicon.ico 16x16 (PNG frame, 32bpp) 32x32 (PNG frame, 32bpp) 48x48 (PNG frame, 32bpp) 180/192/512 etc. are NOT in the ICO — they're separate PNG files referenced by their own link/manifest entries.
Sizes the tool does NOT produce
Know the gaps so you can fill them deliberately if a platform needs them.
Not generated: Windows tile 150x150 + browserconfig.xml maskable PWA icon (purpose: maskable) Safari pinned-tab mask SVG (rel=mask-icon) 1024x1024 store icon (that's svg-app-icon-gen) Author these by hand or use the app-icon generator.
Manifest icon entries
What manifest.json references — the 192 and 512 PNGs, purpose defaults to 'any'.
{
"icons": [
{ "src": "icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "icon-512.png", "sizes": "512x512", "type": "image/png" }
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}Edge cases and what actually happens
Wanting to choose which sizes are generated
Not configurableThe thirteen-size list and the 16/32/48 ICO frames are fixed — Favicon Master has no options. Generate the full set and delete the files you don't need, trimming the matching <link> tags from the README block.
Expecting a Windows tile / browserconfig.xml
Not generatedThere's no browserconfig.xml or 150px tile in the package. Modern Edge uses the web manifest, so this rarely matters; if you target legacy Windows tiles, author the XML and tile PNG yourself.
Looking for a Safari pinned-tab mask icon
Not generatedThe rel="mask-icon" monochrome SVG for Safari pinned tabs isn't part of the package. If you need it, create a single-colour SVG and add the mask-icon link yourself; your main SVG favicon already covers normal tabs.
Needing a 1024px store icon
Wrong toolThe set tops out at 512px, which is the PWA ceiling. For a 1024px App Store icon and native density folders, use svg-app-icon-gen — that's its job. Favicon Master targets web/PWA favicons.
16px icon looks blurry
Design constraintAt 16px, fine detail and thin strokes blur regardless of source quality. Simplify the mark for the icon — a bold, high-contrast shape reads best. The generator can't add detail that the size can't show.
Non-square source
StretchedEvery size is drawn onto a square canvas with no padding, so a non-square SVG is distorted at all thirteen sizes. Square the viewBox first with svg-viewbox-fixer.
Mid-size icons (57–167) unused
Safe to dropThe 57/76/96/120/144/152/167 sizes are legacy Apple/Android touch densities current platforms rarely request. Keeping them is harmless; dropping them on a simple site is fine. The load-bearing sizes are 16/32/48 (ICO), 180, 192, and 512.
Link sizes attribute doesn't match the PNG
Soft iconIf a PNG link's sizes doesn't match the actual file, browsers may scale it and the tab icon looks soft. The README block lines sizes up with the real files — keep them matched if you edit it.
Frequently asked questions
What sizes does the tool generate?
Thirteen PNG sizes: 16, 32, 48, 57, 76, 96, 120, 144, 152, 167, 180, 192, and 512px. The 16/32/48 are also packed into favicon.ico. The 180px is the apple-touch-icon; 192 and 512 are the PWA manifest icons. The set is fixed.
Which sizes go into the favicon.ico?
Just 16, 32, and 48 — packed as true-colour PNG-in-ICO frames in one container. The larger sizes stay as standalone PNG files referenced by their own link tags and the manifest.
What's the minimum favicon set I actually need?
For a basic site: favicon.ico (16/32/48), a 32px PNG, and the 180px apple-touch-icon. Add manifest.json plus the 192 and 512 PNGs only if you ship a PWA. The legacy mid-sizes are optional.
Can I change which sizes are output?
No — there are no options. Generate the full set and delete what you don't need. For non-favicon sizes like a 1024px store icon, use svg-app-icon-gen instead.
Is the apple-touch-icon size 180px?
Yes — the package's icon-180.png is the 180×180 apple-touch-icon, with the matching <link rel="apple-touch-icon" sizes="180x180"> already in the README. iOS applies its own rounded-corner mask, so supply a square image.
What PWA icon sizes are required?
192×192 and 512×512 PNGs in the manifest, both of which the tool produces and references in manifest.json. For a polished Android install you should additionally author a maskable icon — the tool doesn't.
Does it create a Windows tile or browserconfig.xml?
No. There's no 150px tile or browserconfig.xml. Modern Edge uses the web manifest, so it's seldom needed; author them by hand if you specifically target legacy Windows Start tiles.
Do I need a separate 16px PNG if the ICO has 16px?
The README ships both a 16px PNG link and the ICO. Modern browsers that prefer PNG can use the 16/32 PNGs; the ICO's 16px frame covers browsers that go through /favicon.ico. Keeping both is the safe default.
What format does the manifest reference?
PNG — specifically icon-192.png and icon-512.png, with type: image/png. Manifests don't take SVG or ICO icons, which is why those PNG sizes exist in the set.
Is the manifest named manifest.json or site.webmanifest?
manifest.json. It's the same format as site.webmanifest; just keep your <link rel="manifest"> pointing at the filename you deploy. The README uses manifest.json.
Why are there so many mid-range sizes?
The 57/76/96/120/144/152/167 sizes cover older Apple and Android touch-icon densities. Current platforms mostly use 180 (iOS) and 192/512 (PWA), so the mid-sizes are belt-and-braces — harmless to keep, safe to drop.
Where do I get a 1024px App Store icon?
From svg-app-icon-gen, which produces native iOS (including 1024px marketing) and Android density icons. Favicon Master tops out at 512 because that's the web/PWA ceiling.
Privacy first
Every JAD SVG tool runs entirely in your browser using the DOM API and Canvas. Your SVG files never leave your device — verified by zero outbound network requests during processing.