PWA icons and the web manifest: the complete checklist

By Nico Jaroszewski · 15 April 2026 · 8 min read

A Progressive Web App installs cleanly when its web manifest declares a name, short_name, start_url, display, theme_color, background_color, and an icons array with a 192 and a 512 standard icon plus a separate 512 marked "purpose": "maskable". Miss any of these and the install prompt or home-screen icon quietly falls back to a generic glyph.

The manifest fields that matter

• name / short_name: the full and abbreviated app names shown on the install prompt and under the home-screen icon.
• start_url: where the app opens, e.g. /?source=pwa so you can measure installs.
• display: standalone for an app-like window with no browser chrome.
• theme_color / background_color: the toolbar tint and the splash-screen background. Match theme_color with a <meta name="theme-color"> tag.
• icons: the array described below.

The icons array

Three entries cover installability and avoid cropping:

• 192x192, purpose: "any" - the launcher and install-prompt icon.
• 512x512, purpose: "any" - splash screens and the app drawer.
• 512x512, purpose: "maskable" - with a safe zone so Android adaptive launchers do not clip it. See maskable icons.

Don't forget the head tags

The manifest powers Android and the install prompt, but iOS still reads the apple-touch-icon from the head, and browsers want the favicon link tags too. Link the manifest with <link rel="manifest" href="/site.webmanifest"> and add the icon and theme-color tags. The full markup is in the complete favicon guide; in Next.js, a manifest route handles it.

How to test the install

• Run a Lighthouse PWA / Installability audit and clear every icon and manifest warning.
• Check the manifest in Chrome DevTools, under Application, then Manifest - confirm all three icons load and the maskable preview is not clipped.
• Install on a real Android device and confirm the home-screen icon is not cropped.
• Add to Home Screen on iOS and confirm the Apple touch icon is opaque and sharp.

Generate a compliant set in seconds

The Logo2Favicon generator writes a ready-to-ship manifest.webmanifest with the correct icons array and purposes, plus the matching head snippet - so your manifest, files, and tags always line up. Pair it with the icon size cheatsheet if you want to double-check each dimension before you ship.

Keep reading

• Favicon best practices: the definitive 2026 checklist
• How to make a favicon adapt to light and dark mode
• Apple touch icons and maskable icons, explained