PWA Web App Manifest: The Complete Icons Array Specification Guide
Master the W3C Web App Manifest icons specification. Learn how maskable icons, 192x192, and 512x512 assets ensure your PWA looks native on Android.
Google Chrome and Android PWA install criteria require at least a 192x192 PNG and a 512x512 PNG declared in manifest.webmanifest. To prevent Android from letterboxing your icon inside a white circle, provide a separate entry with purpose: 'maskable' and 15% inner padding.
Solve this problem now with our free Favicon Generator
Try it instantly in your browser — zero tracking, 100% client-side privacy.
Specification & Architecture Reference
| Icon Size | Purpose Property | Operating System Role |
|---|---|---|
| 192 × 192 PNG | "any" | Android home screen icon and application drawer thumbnail |
| 512 × 512 PNG | "any" | PWA splash screen loader on launch and Chrome Web Store banner |
| 512 × 512 PNG | "maskable" | Adaptive icon masks (circles, squircles, rounded rects on Samsung/Pixel) |
The Web App Manifest Icons Array
For a Progressive Web App (PWA) to qualify for Chrome's native installation prompt, its **Web App Manifest** (`manifest.webmanifest`) must specify an `icons` array satisfying resolution and purpose requirements.
Production-Ready `manifest.webmanifest` ```json { "name": "Mickytool Developer Suite", "short_name": "Mickytool", "start_url": "/", "display": "standalone", "background_color": "#09090b", "theme_color": "#2563eb", "icons": [ { "src": "/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" }, { "src": "/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" }, { "src": "/icons/icon-maskable-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" } ] } ```
What Is a Maskable Icon? Modern Android versions (Android 8.0+) employ **Adaptive Icons**: different phone manufacturers display app icons in circles, squircles, or rounded rectangles based on device theme.
If an icon is marked only with `"purpose": "any"`, Android nests the graphic inside a white circular badge.
Declaring an icon with `"purpose": "maskable"` signals to Android that the image can be safely cropped into the device's native shape. Keep critical logos within the **inner 80% safe zone** (accounting for 10% edge cropping).
Export your complete PWA icon set—including 192x192, 512x512, and maskable versions—using Mickytool's **Favicon Generator**.
Solve this problem now with our free Favicon Generator
Execute this workflow immediately without saving data on remote servers.
Frequently Asked Questions
Can I use an SVG file directly in manifest.webmanifest icons?
While modern specifications permit SVG entries with purpose: 'any', Android installation requirements still mandate explicit 192x192 and 512x512 PNG fallbacks.
What is the difference between manifest.json and manifest.webmanifest?
They are functionally equivalent, but .webmanifest is the official W3C standardized file extension with its own IANA MIME type: application/manifest+json.