Web app manifest icons: 192, 512 and maskable explained

Updated: 2026-10-27 · AnyToolsKit

The web app manifest (`site.webmanifest` or `manifest.json`) tells Android, Chrome, Edge and other browsers how your site looks when installed as an app. Its `icons` array needs at least a 192 px and a 512 px PNG — ideally with a maskable variant.

A minimal manifest

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

Link it from every page with <link rel="manifest" href="/site.webmanifest">. The Favicon Generator writes this file for you with your site name and colors.

Why 192 and 512?

• 192×192 is used for the Android home screen and app drawer on most devices.
• 512×512 is used for splash screens, install prompts and app stores that accept PWAs. Chrome requires it for the install criteria.
• Browsers downscale as needed, so intermediate sizes (144, 256, 384) are optional.

Maskable icons and the safe zone

Android displays icons in different shapes — circles, squircles, rounded squares — depending on the device. An icon with "purpose": "maskable" is a full-bleed square that the system crops. Only the central circle with a diameter of 80% of the icon (the safe zone) is guaranteed to be visible.

• Fill the whole square with your background color — no transparency.
• Keep the logo inside the central 80% circle; 60–70% is safer.
• Provide both a normal (any) and a maskable icon rather than one icon with "any maskable"; a maskable icon with large padding looks too small where it is not cropped.

theme_color and background_color

theme_color tints the browser toolbar and task switcher; match it with <meta name="theme-color"> in your HTML. background_color fills the splash screen before your page renders — usually your page background.

Testing your manifest

1. Open Chrome DevTools → Application → Manifest. Errors and warnings appear at the top, and icons are previewed, including the maskable crop.
2. Run a Lighthouse audit to check installability.
3. Install the site on an Android phone and look at the home screen and app switcher.