PWA Manifest Icons 2026 — Every Size for iOS, Android, Desktop

A Progressive Web App (PWA) needs more than just favicons — it needs a web app manifest with the right icon set, including maskable icons for adaptive icon platforms (Android) and monochrome icons for system tints. Here's the complete 2026 icon spec.

What is a Web App Manifest?

A JSON file (typically site.webmanifest or manifest.json) that tells the browser how your site should behave when installed as a PWA: name, theme color, display mode, and icons.

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

The minimum manifest

{
  "name": "Your App",
  "short_name": "App",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#3b82f6",
  "background_color": "#ffffff",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

The required icon sizes

• 192x192 — Android home screen, smaller PWA UI elements
• 512x512 — Android splash screen, store listings, high-DPI displays

That's the bare minimum. Below are recommended additions.

The recommended icon sizes

Maskable Icons (the modern requirement)

Android's adaptive icons system applies a circular, rounded-square, or other mask to your icon. If your icon doesn't fill the whole square, the mask cuts off important content.

The fix: provide a maskable icon with safe zone padding.

{
  "src": "/icon-maskable-512.png",
  "sizes": "512x512",
  "type": "image/png",
  "purpose": "maskable"
}

Design rules for maskable:

• Logo content must be inside the central 80% safe zone (a circle of diameter 80% of the icon)
• The outer 10% on each side will be cropped
• Use a solid background — never transparent

Monochrome Icons (for system tints)

Android 13+ supports themed icons that adopt the user's wallpaper color. Provide a monochrome (single-color) version:

{
  "src": "/icon-mono-512.png",
  "sizes": "512x512",
  "type": "image/png",
  "purpose": "monochrome"
}

Design rules: white silhouette on transparent background. Solid shapes only — gradients won't render.

The complete 2026 manifest icons array

"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" },
  { "src": "/icon-mono-512.png", "sizes": "512x512", "type": "image/png", "purpose": "monochrome" }
]

iOS-specific quirks (no manifest support)

iOS still doesn't fully read the manifest. Always include the parallel apple-touch-icon link tag:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Validating your manifest

1. Chrome DevTools → Application → Manifest tab
2. Lighthouse PWA audit — flags missing icons and bad sizes
3. web.dev/measure for full PWA score

Common manifest mistakes

1. JSON syntax error. A trailing comma breaks the entire manifest.
2. Wrong MIME type. Serve manifest.json with application/manifest+json.
3. Missing maskable. Android shows a small floating logo in a white square — looks unprofessional.
4. start_url with hash routing. Use a real URL, not #.
5. display: browser. Defeats the point of a PWA. Use standalone.

Generating the icon set

Manually creating 192x192, 512x512, maskable (with 80% safe zone), and monochrome variants is tedious. og.hjlabs.in's generator outputs all four with correct safe zones, plus the manifest JSON, in one ZIP.

Bottom line

For a working 2026 PWA, you need: 192x192, 512x512, a maskable 512x512, ideally a monochrome 512x512, plus the manifest pointing to all four. Skip the manifest and you skip the install prompt — Chrome won't offer "Install app" without it.