Progressive Web Applications occupy a fascinating middle ground between web and native. They run in browsers, but they can be installed on home screens. They are delivered over HTTP, but they behave like native apps. And critically, they need a complete set of carefully specified icons to be installable, shareable, and presentable across every surface where they might appear.
PWA icon requirements are defined by the Web App Manifest specification, but the reality of making icons work well across Chrome on Android, Safari on iOS, Edge on Windows, and every other browser-platform combination demands knowledge that goes well beyond just reading the spec. Getting PWA icons right is one of the most important steps toward a polished, professional installable web experience.
The Web App Manifest and Icon Declaration
Every PWA declares its icons through the manifest.json file. The browser reads this manifest to understand which icon to use when adding the PWA to the home screen, which to use in task switchers, and which to use as a splash screen background. The manifest's icons array should include multiple sizes, and each entry must specify its exact pixel dimensions in the sizes field.
manifest.json// Web App Manifest icon declarations
{ "name": "My Awesome PWA", "icons": [ { "src": "/icons/icon-72.png",
"sizes": "72x72", "type": "image/png" }, { "src": "/icons/icon-96.png",
"sizes": "96x96", "type": "image/png" }, { "src": "/icons/icon-128.png",
"sizes": "128x128", "type": "image/png" }, { "src": "/icons/icon-
144.png", "sizes": "144x144", "type": "image/png" }, { "src":
"/icons/icon-152.png", "sizes": "152x152", "type": "image/png" },
{ "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png",
"purpose": "any maskable" }, { "src": "/icons/icon-384.png", "sizes":
"384x384", "type": "image/png" }, { "src": "/icons/icon-512.png",
"sizes": "512x512", "type": "image/png", "purpose": "any maskable" } ] }
Maskable Icons: The Critical PWA Icon Type Most Developers Miss
Chrome on Android uses a concept called maskable icons. When a user adds a PWA to their Android home screen, Chrome applies the same adaptive icon mask that native Android apps receive. If your PWA icon is not maskable, Chrome will display it with a white circle background — which looks inconsistent and amateurish next to properly implemented native and PWA apps.
A maskable icon must have its logo contained entirely within the safe zone — the inner 80% of the icon (approximately 409×409 pixels of a 512×512 icon). The outer 10% on each side is the bleed zone that may be cropped by different mask shapes. If your logo extends into this bleed zone, it will be partially clipped on certain Android launchers. Always design maskable icons with this safe zone in mind.
✅ PWA Icon Checklist
✓ 192×192 maskable PNG ✓ 512×512 maskable PNG ✓ Favicon 16×16 & 32×32 ✓ Apple Touch Icon 180×180 ✓ manifest.json entries with correct sizes & purpose fields
Safari and Apple's PWA Icon Approach
Apple's treatment of PWA icons is notably different from Chrome's. Safari on iOS uses tags in your HTML, not the manifest icons, for the home screen icon on iPhone. This means you need both proper manifest icon declarations for Chrome-based browsers and Apple touch icon meta tags for Safari. Missing either means a broken experience on roughly half of your mobile users.
Iconify generates all PWA icon sizes including the correct maskable variants and Apple touch icons automatically, eliminating the need to remember every platform's quirks. Check the full feature list at iconify.roboticela.com.
PWA Icons, Done Right
Maskable icons, Apple touch icons, favicons — the whole set in seconds.
Top comments (0)