Favicon Sizes & Dimensions: Every Size You Need in 2026
Published November 30, 2025 · Updated June 9, 2026
The favicon sizes that actually matter in 2026: 32×32 in an ICO, a scalable SVG, 180×180 Apple touch, and 192/512 PWA icons. Full chart and clean HTML.
The favicon sizes that actually matter in 2026 are smaller in number than most old tutorials claim. You need a multi-size favicon.ico (at least 32×32), one scalable favicon.svg, a 180×180 Apple touch icon, and 192×192 plus 512×512 PNGs for Progressive Web Apps. That’s it.
In one line: design once at 512×512, then ship five files — not a dozen.
The old advice to hand-export 16×16, 32×32, 48×48, 96×96, 120×120, 152×152, 167×167, 180×180, 192×192 and 512×512 as separate PNGs is outdated. Browsers now read a scalable SVG and downscale it, and a single .ico bundles the small sizes for you. Below is the size chart that reflects how browsers actually behave today, plus the clean HTML to match.
The favicon size chart for 2026
This is the complete modern set. Generate these from one 512×512 source and you’re done:
| File | Size | Purpose |
|---|---|---|
favicon.ico | 16, 32, 48 bundled (min 32×32) | Legacy browsers, desktop tabs, Google’s search-result fallback |
favicon.svg | Scalable (has a viewBox) | Primary modern icon — sharp at every size, supports dark mode |
apple-touch-icon.png | 180×180 | iOS home screen (opaque, ~20px padding) |
icon-192.png | 192×192 | Android home screen / PWA (purpose any) |
icon-512.png | 512×512 | PWA install + splash (purpose any) |
icon-512-maskable.png | 512×512 | Android adaptive icon (purpose maskable, 409×409 safe zone) |
Everything else you’ve seen in older guides — 96×96, 120×120, 152×152, 167×167 — is either covered by one of these files or no longer requested by current browsers.
Why these specific sizes
Each size maps to a real surface where your icon shows up:
- 32×32 is the working size for desktop browser tabs on high-DPI (Retina) displays, and it’s the minimum size Google wants for the icon next to your search listing. The
.icoalso carries 16×16 (standard-resolution tabs) and 48×48 (Windows shortcuts) in the same file. - The SVG is resolution-independent, so one file stays crisp from a 16px tab to a 512px tile. Modern Chrome, Edge, and Firefox prefer it when present.
- 180×180 is the single Apple touch icon size current iPhones and iPads use. Older devices scale it down.
- 192×192 and 512×512 are the two PWA icon sizes referenced in your web app manifest — 192 for the home-screen launcher, 512 for install prompts and splash screens.
- A separate maskable 512×512 exists because Android crops icons into a circle, squircle, or rounded square depending on the device. (More on that below.)
Why you no longer export a dozen PNGs
Two changes made the long size list obsolete:
- SVG favicons scale. A single vector file renders sharply at any size, so the old practice of exporting 16/32/48/96 as separate PNGs is redundant when you ship an SVG. Browsers that don’t support SVG fall back to the
.ico, which already holds the small raster sizes. favicon.icois multi-size. One.icofile can contain 16×16, 32×32, and 48×48 frames at once. The browser picks whichever fits — you don’t reference them separately.
The result: the modern minimum is the six files in the chart above, and three of those (.ico, .svg, Apple touch) cover the vast majority of real-world rendering.
The maskable icon and the 409px safe zone
Android doesn’t show your icon as a plain square. It masks it into whatever shape the launcher uses — circle, squircle, or rounded square — and crops anything near the edges. If you hand it a regular 512×512 with the logo filling the frame, the corners get clipped.
The fix is a separate maskable icon: a 512×512 PNG with all the important artwork inside a central circle 409×409 pixels wide (the “safe zone”), and the surrounding ring used only for background. This file gets "purpose": "maskable" in the manifest. Don’t try to mark one icon "purpose": "any maskable" — a maskable icon needs its own padded artwork, so the two should be different files.
Apple touch icon: opaque, with padding
The 180×180 apple-touch-icon.png has two rules that trip people up:
- No transparency. iOS composites the icon onto the home screen and applies its own rounded-corner mask. A transparent background turns black. Fill it with a solid colour.
- Leave ~20px of padding. iOS rounds the corners, so artwork that runs to the edge gets clipped. Keep the logo away from the edges.
The clean HTML for every size
Here’s the markup that references the modern set. Note there’s no rel="shortcut icon" (never a valid relation) and no long list of per-size <link> tags:
<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">The favicon.ico covers legacy and tab rendering, the SVG is the sharp modern icon, the Apple touch icon handles iOS, and the manifest carries the PWA sizes. (Full tag-by-tag breakdown →)
The PWA sizes in your manifest
The 192, 512, and maskable icons live in site.webmanifest as three separate entries:
{
"name": "Your Site Name",
"short_name": "Site",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" },
{ "src": "/icon-512-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}Three entries, not one with a combined purpose — that’s the part most generators still get wrong. (Full PWA manifest guide →)
Generate every size from one upload
Exporting all six files at the right dimensions — opaque Apple icon, padded maskable, multi-size ICO, optimised SVG — is fiddly to do by hand. FaviconBuilder takes one logo (SVG preferred, or a PNG/JPG at 512×512 or larger) and produces the complete set plus the exact HTML and manifest to paste in — free, no account, and the image never leaves your browser.
Summary
The modern favicon set is six files generated from one 512×512 source:
favicon.ico— multi-size, at least 32×32favicon.svg— scalable primary iconapple-touch-icon.png— 180×180, opaque, paddedicon-192.pngandicon-512.png— PWA icons (purposeany)icon-512-maskable.png— Android adaptive icon (purposemaskable)
Skip the old dozen-PNG list — the SVG and multi-size ICO do that work now.
Continue reading:
Frequently asked questions
What size should a favicon be?
Design from a single 512×512 source, then ship a multi-size favicon.ico (at least 32×32), a scalable favicon.svg, a 180×180 apple-touch-icon.png, and 192×192 plus 512×512 PNGs for PWAs. That set covers every browser and device in 2026.
Do I still need a 16×16 favicon?
You need 16×16 rendering, but not a hand-exported 16×16 PNG. A multi-size favicon.ico already bundles 16/32/48, and an SVG favicon scales down cleanly. Browsers pick the right size from those — you don't ship a separate 16×16 file anymore.
What is the correct Apple touch icon size?
180×180 pixels. It's the only Apple touch icon size you need in 2026 — newer and older iPhones and iPads scale that one file. Make it opaque (no transparency) with about 20px of padding, because iOS adds its own rounded corners.
What favicon sizes does a PWA need?
Three manifest icons: 192×192 (purpose any), 512×512 (purpose any), and a separate 512×512 maskable icon with its art inside a central 409×409 safe zone (purpose maskable). The maskable icon needs its own padded artwork — don't reuse the plain 512.
Is a 1024×1024 or 256×256 favicon necessary?
No. 512×512 is the largest size any current browser or PWA surface requests. Design your source at 512×512 (or larger, then export at 512) and you've covered every real use case — bigger files just add weight.