PWA icon sizes and the web app manifest
A Progressive Web App declares its icons in a web manifest. You really only need two PNG sizes plus a maskable version — here's the modern, minimal set and why the “maskable” one matters.
The core sizes
- 192×192 — home-screen icon on Android.
- 512×512 — splash screen and high-density displays.
- Maskable 512×512 — same art with safe padding so platforms can crop it into circles, squircles, etc.
Manifest example
"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-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
]What is a maskable icon?
Android and other platforms crop app icons into different shapes. A maskable icon keeps its important content inside a central “safe zone” (about 80% of the canvas) with a full-bleed background, so it never gets clipped awkwardly. Test yours with a maskable-icon preview tool.
Tip: an SVG favicon can sit alongside these PNGs — browsers use the SVG for tabs and the manifest PNGs for installs.
Frequently asked questions
How many icon sizes does a PWA need?
Two PNGs (192 and 512) plus a maskable 512 cover the modern requirement. More sizes are optional.
What does purpose:maskable do?
It tells the OS the icon has safe padding and can be cropped to any shape without losing key detail.