Manifest icons and maskable icons

In one line: icons is an array of image objects that the browser picks from when it needs your PWA’s icon — on the home screen, in the OS app switcher, in splash screens, and on install prompts. Supply at least a 192 px and a 512 px PNG, and add a maskable variant so Android can reshape the icon to match the device’s icon shape.

Syntax

{
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512-maskable.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Each object has four properties:

Property	Required	Description
src	Yes	URL of the image, relative to the manifest.
sizes	Yes	Space-separated WIDTHxHEIGHT strings (e.g. "192x192 256x256").
type	Recommended	MIME type: image/png, image/webp, image/svg+xml.
purpose	Optional	"any" (default), "maskable", or "monochrome".

Minimum required set

Most browsers require at least a 192 px icon to offer install. The 512 px icon is used for the splash screen. Supply both:

• 192x192 PNG — home-screen and install prompt
• 512x512 PNG — splash screen

A single SVG with sizes: "any" is not yet universally accepted as a standalone replacement for raster icons.

Maskable icons

Android applies a platform-defined shape (circle, squircle, teardrop, etc.) to all home-screen icons. Without a maskable icon, the browser adds a white background circle behind your icon to prevent clipping. This looks out of place for icons with transparent backgrounds.

A maskable icon has the full image content within the safe zone — the central 80% circle of the image. Anything in the outer 10% border may be clipped.

Design guidelines:

• Keep essential content (logo mark, symbol) within the safe zone.
• Fill the entire canvas with a background color so no transparent gap appears when the OS masks the shape.
• Test using maskable.app before shipping.

Declare maskable icons with "purpose": "maskable":

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

You can also list multiple purposes in a single entry:

{
  "purpose": "any maskable"
}

Avoid combining monochrome with other purposes — it has distinct rendering expectations.

Icon selection algorithm

The browser walks the icons array and selects the best-fit icon based on:

1. The required display size.
2. The purpose that matches the context (maskable for Android shaped icons, any for others).
3. The closest size at or above the required size (to avoid upscaling).

List icons from smallest to largest. Provide separate objects for separate purposes rather than relying on "any maskable" combined values.

SVG icons

SVG icons are accepted by some browsers (Chrome 98+, Edge 98+) via "sizes": "any". SVG icons scale well and eliminate the need for multiple raster sizes on supporting platforms, but are not yet sufficient as a standalone icon on iOS or in some desktop launchers. Use SVG as an addition to, not a replacement for, 192 px and 512 px PNGs.

Practical checklist

• A 192 px PNG icon is present.
• A 512 px PNG icon is present.
• A maskable variant (512 px, "purpose": "maskable") is present.
• Maskable icon content is within the safe zone (central 80%).
• Maskable icon has a solid background fill — no transparency.
• Icon URLs are correct relative to the manifest location.
• You have tested the installed icon shape on Android (to confirm the maskable icon is used).