I Built a PWA Last Month. The Favicon Setup Took Longer Than the Service Worker.
I spent four hours getting a client's PWA icons right. The service worker took 20 minutes. That ratio is broken, and it's because every tutorial tells you to generate 47 icon files, but nobody tells you which ones actually get used.
I tested a PWA install on Chrome Android, Chrome Desktop, Safari iOS, Edge, and Samsung Internet. Here's what each browser actually reads — and which files you can skip.
The Files You Actually Need (Stop at 5)
Every PWA favicon guide will tell you to generate 192px, 512px, maskable, monochrome, SVG, ICO, PNG, Apple touch icons in 5 sizes — it adds up to 15+ files. In my testing across 5 browsers in June 2026, only 5 files matter:
favicon.svg — Modern browsers (Chrome, Firefox, Edge) prefer SVG icon-192.png — Android home screen, PWA splash icon-512.png — Android PWA splash, higher density apple-touch-icon.png — iOS home screen bookmark (180x180) favicon.ico — Fallback for IE11 and old Safari
That's it. Five files. I tested without a 32x32 PNG, without a 16x16, without a maskable variant — no browser complained. The SVG handles all modern cases at any resolution, the 192/512 PNGs handle PWA install, and the ICO is a safety net for ancient browsers.
The SVG Favicon Is Actually Supported Now
For years SVG favicons were a "coming soon" feature. As of 2026, SVG favicon support sits at 82% global coverage. Chrome has supported it since version 80, Firefox since 41. Safari is the holdout, which is why you still need the Apple touch icon and the ICO fallback.
An SVG favicon is about 400 bytes and looks crisp at every size. Compare that to generating 6 PNGs at different resolutions totaling 40KB. The SVG approach is cleaner and the code is trivial:
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
One line. Covers Chrome, Firefox, Edge, Opera. Then you add the Apple touch icon for Safari and the ICO for anything else. Three link tags total.
The Web App Manifest Is What Makes It a PWA
The manifest is where most people mess up. You need at least two icon sizes in the manifest — 192x192 and 512x512 — but I recommend using the same image file referenced at different sizes:
{
"name": "My App",
"icons": [
{"src": "/icon-192.png", "sizes": "192x192", "type": "image/png"},
{"src": "/icon-512.png", "sizes": "512x512", "type": "image/png"}
]
}
Chrome uses the 192px icon for the home screen and the 512px for the splash screen on high-DPI devices. If you only provide 512px, Chrome will scale it down, which works fine but wastes bandwidth on every PWA launch.
I tested with and without "purpose": "maskable" — Chrome uses maskable icons if available but doesn't require them. Android will crop your regular icon into a circle or squircle depending on the launcher. If you want full control, add a maskable icon. If you don't care about the exact crop shape on a Samsung phone, skip it.
iOS Is Still the Weird One
Safari ignores your manifest entirely. It reads only the apple-touch-icon link tag and the apple-mobile-web-app-title meta tag. You need both:
<link rel="apple-touch-icon" href="/apple-touch-icon.png"> <meta name="apple-mobile-web-app-title" content="My App">
The 180x180 size is what iOS 14+ uses. If you provide a smaller icon, iOS scales it up and it'll look fuzzy on any iPhone from the last 4 years. 180x180 is the one to generate.
I also tested whether the apple-touch-icon-precomposed link still matters — it doesn't. iOS hasn't applied gloss effects to icons since iOS 6. The precomposed keyword is a fossil.
The 15-Minute PWA Favicon Setup
Here's the complete head section I landed on for production:
<link rel="icon" href="/favicon.svg" type="image/svg+xml"> <link rel="icon" href="/favicon.ico" sizes="32x32"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/manifest.json"> <meta name="apple-mobile-web-app-title" content="App Name"> <meta name="theme-color" content="#yourcolor">
Six lines. Five files. Works on every browser I tested. Use genfavicon.org to generate all of them in one click — select PWA mode and it outputs the SVG, PNGs, ICO, and a ready-to-paste HTML snippet.
Written by David Kim — Frontend developer and WordPress specialist who tests this stuff so you don't have to. More about me →