Web App Manifest Icons — JSON Configuration for PWA Favicons

Web App Manifest Icons

The web app manifest (site.webmanifest or manifest.json) is a JSON file that defines how your web application appears when installed on a device. The icons array is one of its most important properties.

Basic Manifest Structure

{
  "name": "My Application",
  "short_name": "MyApp",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#3b82f6",
  "icons": [
    {
      "src": "/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

The Purpose Field

The purpose field defines how the icon can be used:

• "any" (default) — Standard icon, no masking applied
• "maskable" — Safe to be masked by any shape
• "monochrome" — Can be used as a monochrome glyph with fill color applied

You can combine purposes:

{
  "src": "/icons/icon-192x192.png",
  "sizes": "192x192",
  "type": "image/png",
  "purpose": "maskable any"
}

Maskable Icons

Maskable icons need extra padding (safe zone = inner 80%):

Full 192x192 canvas:
┌──────────────────────┐
│                      │
│   ┌──────────────┐   │
│   │              │   │
│   │  Safe Zone   │   │
│   │   (80%)      │   │
│   │              │   │
│   └──────────────┘   │
│                      │
└──────────────────────┘
     Mask area (20%)

Recommended Icon Set

At minimum, include these sizes in your manifest:

• 192x192 — Required for Add to Home Screen
• 512x512 — Required for PWA splash screen

For the best experience, also include: 72x72, 96x96, 128x128, 144x144, 152x152, 384x384.

Linking the Manifest

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

Place the manifest file in your public/root directory. The paths in the manifest are relative to the manifest file location.