site.webmanifest: the PWA icon & manifest guide

A site.webmanifest file tells the browser your app's name, colors and icons. It is what makes "Add to Home Screen" and installable PWAs show a proper icon instead of a screenshot or a generic placeholder.

What is site.webmanifest?

The web app manifest is a JSON file, commonly named site.webmanifest (or manifest.json), linked from your page. It describes your app to the device: its name, the icons to use, the theme color, and how it should launch.

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

A minimal, correct manifest

{
  "name": "Your Site",
  "short_name": "Site",
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ],
  "theme_color": "#F3A04C",
  "background_color": "#ffffff",
  "display": "standalone",
  "start_url": "/"
}

Icon sizes that matter

A manifest needs at least a 192 and a 512 pixel icon for Chrome to consider the app installable.

Maskable icons, explained

A maskable icon is designed to be cropped into a circle, squircle or rounded square by the operating system. Keep the important artwork inside the central safe zone (roughly the middle 80%) and fill the edges with your background color, or Android will clip your logo.

Common mistakes

• Missing 512×512 icon — the install prompt never appears.
• Wrong MIME or path — a 404 on the manifest silently disables the whole feature. Check DevTools → Application → Manifest.
• No purpose: maskable — Android shows your icon shrunk inside a white circle.
• Using a transparent maskable icon — the transparent area becomes black after masking.