Make PWA Icon Pack with Maskable Icons (from one SVG)

In this guide you’ll generate a complete PWA icon pack from one SVG in Axialis IconVectors: 192×192 and 512×512 PNGs plus a maskable variant, then wire it up in manifest.json and test with Maskable.app. MDN and web.dev continue to recommend maskable icons and document the purpose field that enables them.

What sizes do you really need in 2025?

• Baseline: provide at least 192×192 and 512×512 PNG icons in your manifest; these sizes appear in MDN examples and remain the common PWA baseline.
• Optional extras: some teams also include 256×256 and 384×384 to match older guidance and edge contexts, but most cases are covered by 192/512 when paired with a maskable variant.
• Minimal favicon/app‑icon set: current best‑practice guides favor a small, modern set (SVG favicon + a couple PNGs + maskable icons for PWA installs).

Create a maskable icon (safe area & padding)

Maskable icons let the OS crop your image to device‑specific shapes (circle, squircle, etc.) while still filling the full icon area. Keep critical artwork inside the safe zone—a circle whose diameter is 80% of your icon’s size—and ensure the background fills the full square. Test with Maskable.app.

Step‑by‑step in IconVectors

1. Open, draw, or import your SVG.
   • Open: File → Open… (Ctrl+O)
   • Create: New Icon (Ctrl+N) and design on a square grid (any size, for example 32x32).

   

2. Export multiple sizes in one pass:

   Open File → Export → Export to Multiple Bitmaps (Shift+F3). Choose a destination folder and set a base filename (e.g., pwa-icon).

   

   • File Formats — check PNG Icons (*.PNG) – 32BPP Alpha Channel Transparency.
   • Sizes in Pixels — select 256 and 512; add custom sizes 192 and 384.
   • Colors — PNGs are 32‑bit with alpha; no flat background needed.
3. Make a maskable variant:
   • Export a second pair named pwa-icon-192-maskable.png and pwa-icon-512-maskable.png (use the same dialog and sizes).
   • Keep the artwork within the safe zone; give the icon an opaque background to fill the square. Validate in Maskable.app.
4. Update manifest.json:

   {
     "name": "My PWA",
     "start_url": "/",
     "display": "standalone",
     "icons": [
       { "src": "/icons/pwa-icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
       { "src": "/icons/pwa-icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" },
       { "src": "/icons/pwa-icon-192-maskable.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" },
       { "src": "/icons/pwa-icon-512-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
     ]
   }

   Many teams prefer a single declaration using "purpose": "any maskable" for each size to cover both cases.

5. Test & iterate:
   • Open Maskable.app and preview how your icon crops across shapes; adjust padding if edges get clipped.
   • Run Lighthouse’s “Maskable icon” audit to confirm your manifest includes a maskable icon.

Notes & troubleshooting

• Icon looks off‑center? Increase the internal padding so the glyph sits comfortably within the mask’s 80% safe zone.
• Large PNGs — export minified SVG masters and re‑export PNGs when needed; you can also run lossless PNG optimization in your build.
• Favicons vs PWA icons — the favicon is separate from PWA icons; a modern minimal set favors SVG favicon + a couple PNGs.