PWA · Web app manifest

PWA Icons and Maskable Icons: Sizes and Manifest

Q: Can PWA icons be SVG?

Yes, with sizes: "any", but add PNGs too; installed SVG icons don't update.

Short answer

Your manifest needs a 192×192 and a 512×512 icon for Chrome to offer install. Add a separate 512×512 maskable icon with "purpose": "maskable", keeping the logo inside a circle whose radius is 40% of the width. Don't mark one image as both any and maskable.

Checked against web.dev: Install criteria, web.dev: Maskable icons and MDN: manifest icons in October 2026.

Manifest

manifest.webmanifest

{
  "name": "My App",
  "short_name": "MyApp",
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" },
    { "src": "/icon-mask.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" }
  ],
  "display": "standalone"
}

<head>

<link rel="manifest" href="/manifest.webmanifest">

Sizes and purposes

Icon	Size	purpose
Standard	192×192	`any` (default)
Standard	512×512	`any` (default)
Maskable	512×512, logo inside a 409 px circle	`maskable`
Monochrome (optional)	Any	`monochrome`

With only 192 and 512, Chrome scales them for each device. Always include PNGs; SVG manifest icons don't update after install.

Maskable safe zone

Keep the important part in a centered circle with a radius of 40% of the width (409 px across on a 512 icon).
Fill the whole square with your background color. Up to the outer 10% may be cropped.
Preview in Chrome DevTools → Application → Manifest → Icons, with Show only the minimum safe area for maskable icons.
Or test at maskable.app.

PWA icon problems and fixes

You see	Why	Fix
No install prompt	Missing 192 or 512 icon	Add both to `icons`
Maskable icon cropped	Logo outside the 40% radius circle	Shrink the logo; fill the background
Icon shows with a white border	No maskable icon, Android adds a backdrop	Add a `maskable` icon
Icon tiny inside a circle	One image used as `any maskable`	Ship separate `any` and `maskable` files
Icon didn't change after update	Installed icons update slowly or not at all for SVG	Use PNGs and new file names

FAQ

What icon sizes does a PWA need?

192×192 and 512×512 at minimum, plus a 512×512 maskable icon.

What is a maskable icon?

An icon with a safe zone, so Android can crop it to a circle, squircle or other shape without cutting the logo.

Can I use `any maskable` on one icon?

web.dev advises against it; the icon ends up either cropped or padded. Use separate files.

Can PWA icons be SVG?

Yes, with sizes: "any", but add PNGs too; installed SVG icons don't update.