Guide · Glyphtide
Favicon sizes in 2024.
Four PNGs, a JSON manifest, and one Apple touch icon are the minimum modern browsers and PWA platforms expect in 2024. This page walks the short list, why each size exists, and how to ship them with one SVG source — and you can poke the editor live at the bottom before you commit to a design.
The tab strip
Why 16×16 is the floor.
Every browser renders a favicon next to the page title in the tab strip, and the conventional target for that pixel is 16×16. On Windows and Linux a 16-pixel asset fits a single device pixel; on macOS Safari and on every Retina-class display the same slot is doubled, which is why the 32×32 variant also ships. Glyphtide emits both files from one SVG source, so when the browser samples them the content is pixel-aligned — the same gradient, the same glyph, the same corner radius.
Hi-DPI
Why you also need 32×32.
On a 2× display the tab strip draws a 32-physical-pixel slot. If your site only ships the 16×16, the browser stretches it and the icon looks fuzzy next to the title. Shipping both favicon-16.png and favicon-32.png and wiring them as separate sizes="16x16" / sizes="32x32" link tags lets the browser pick the right one for the display it’s running on. Same body, different canvas — no design drift.
iOS
Why 180×180 is the Apple touch icon.
iOS does not read the web manifest when a user adds a page to the home screen. It looks at <link rel="apple-touch-icon"> and serves whichever file the tag points to. The conventional target is 180×180 (3× the 60-pixel point size for the older iPhone baselines). Modern iOS applies its own corner-radius mask, so a sharp, square-cornered 180 PNG is what every current device expects. The apple-touch-icon-precomposed variant is deprecated.
PWA
Why 512×512 is the PWA hero.
A PWA installer reads the manifest, samples its icons[] array, and uses the largest entry as the install icon and splash hero. 512×512 is the modern minimum — large enough for a clean maskable silhouette after the OS rounds the corners and adds padding. Aim for at least one maskable variant (artwork inside the inner 80% of the canvas, so the OS mask never clips the mark) and one purpose-built (mark anywhere inside the canvas).
The manifest
What site.webmanifest actually says.
The manifest is the JSON file a PWA installer reads before placing your app on a home screen. The fields Glyphtide writes for you are the ones a launch checklist actually checks:
{
"name": "Acme",
"short_name": "Acme",
"start_url": "/",
"display": "standalone",
"background_color": "#fffafd",
"theme_color": "#c9358a",
"icons": [
{ "src": "/favicon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/favicon-512.png", "sizes": "512x512", "type": "image/png" }
]
}The HTML
The five-tag head snippet.
Drop these five tags into the <head> and the browser, the PWA installer, and iOS each pick the file they need. Glance at ?v=2 below the link rel="icon" — the version suffix turns the new file into a different URL, which is what tells an aggressively cached browser to actually re-fetch the artifact.
<link rel="icon" href="/favicon-32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/favicon-16.png" sizes="16x16" type="image/png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#c9358a">Try the editor
Same SVG, four sizes — live.
Pick a glyph or a two-letter monogram, drag the gradient stops and the corner + padding sliders. The right side renders the same body at 16, 32, 180, and 512 pixels — exactly the four PNGs a modern favicon kit ships.
Rocket
22%8%Live preview
Every PNG is a rasterization of the same SVG body. Change the radius or padding and the change is visible down to the 16-pixel tab-strip tile.
Ship four sizes in one zip
Like the demo? Open the full editor.
The production editor unlocks the kit zip — every artifact in this guide ready to drop into a repo. $12 once, commercial license included.
Curious about something this page didn’t cover? Reply to glyphtide@polsia.app — replies usually arrive within a working day.