PWA icon generator

The icons a PWA manifest needs

Maskable icons and the safe zone

Android launchers crop app icons into circles, squircles or rounded squares, depending on the device. A maskable icon is drawn full-bleed so there is no white box around it, with the important part of the design kept inside the safe zone: a centered circle with a radius of 40% of the icon size, so 80% of the width.

favicon.zip renders icon-mask.png with an opaque background and extra inset, so the mark stays inside that circle whatever shape the launcher applies. Keep a separate non-maskable icon too. A maskable icon shown uncropped looks over-padded.

Monochrome icons

An icon with purpose: "monochrome" is used as a mask: the system ignores its colors and fills the opaque pixels with its own. That suits notification badges and themed launchers. Keep the shape simple and solid.

The generated manifest

{
  "name": "Your app",
  "short_name": "App",
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-mask.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" },
    { "src": "/icon-mono.png", "type": "image/png", "sizes": "512x512", "purpose": "monochrome" }
  ]
}

Set the app name, short name and theme color in the editor and they are written in. Link the manifest with <link rel="manifest" href="/manifest.webmanifest">. Installed apps can also show an unread count on the app icon, which the dynamic favicon module handles.

Questions