Bottom-line: I ship PWA manifest icons at 192 by 192 plus 512 by 512 with purpose any plus maskable and I validate installs with Lighthouse before launch. Start from a 1024 master with padding, export exact PNG sizes in the favicon generator, pair with theme color plus background color, and keep paths stable for robots plus sitemap crawls.
I tested Add to Home Screen on a Pixel 7 running Android 14 with a fresh install profile. Variant A used tight 192 plus 512 squares with purpose any only. Variant B used padded 192 plus 512 squares with purpose any plus maskable plus matching theme color. Variant A looked clipped on the home grid and splash art showed thin pale edges. Variant B installed clean with rounded adaptive masking intact and splash backdrop matched the toolbar tint.
Required sizes JSON block that powers install prompts
Install prompts depend on a small JSON block that lists exact sizes plus types plus purposes. I deploy 192 by 192 for home screen grid plus 512 by 512 for splash plus store plus type image PNG for decoding plus display standalone for app like chrome.
| Manifest field | Value I ship | Install role tested |
|---|---|---|
| src 192 | icons icon-192 PNG | Home grid tile plus prompt minimum |
| sizes 192 | 192x192 exact pixels | Prevents upscale blur on launchers |
| src 512 | icons icon-512 PNG | Splash hero plus store listing |
| sizes 512 | 512x512 exact pixels | Keeps splash sharp on high density |
| type | image PNG with alpha | Ensures fast decode plus transparency |
| purpose | any plus maskable entries | Covers legacy plus adaptive shapes |
| display | standalone with scope root | Opens without browser bar |
- Ship exact pixels at 192 plus 512 I verified with dev tools image check.
- Ship PNG with alpha for crisp edges on light plus dark launchers.
- Ship dual purpose entries so any covers fallback and maskable covers adaptive.
Maskable vs any purpose and when to ship both
Purpose controls how much cropping the system may apply. I treat any purpose as safe square for tabs plus bookmarks plus older launchers. I treat maskable purpose as adaptive crop for Pixel plus Samsung plus modern launchers that cut circles plus squircles plus rounded squares.
| Zone tested | Pixels on 512 master | Design rule I use | Result observed |
|---|---|---|---|
| Full bleed tile | 0 to 512 full canvas | Fill brand color edge to edge | No white rim on adaptive masks |
| Outer trim risk | 0 to 51 edge band | No text plus no thin strokes | Prevents clipped letterforms |
| Central safe 80 percent | 51 to 461 core square | Place logo plus wordmark inside | Sharp on circle plus squircle |
| Contrast audit | Full tile sample | Test 3 to 1 bold glyph contrast | Pass on light plus dark themes |
Lighthouse installability checks I ran for PWA icons
Lighthouse PWA audits give fast pass or fail signals before real device testing. I run the installable manifest audit plus 192 pixel minimum audit plus 512 pixel splash audit plus maskable icon audit in desktop dev tools with mobile emulation.
- Confirm manifest loads at site webmanifest with JSON MIME I checked in network panel.
- Confirm icons load at icons icon-192 plus icons icon-512 with 200 plus correct dimensions.
- Confirm purposes pass with one any entry plus one maskable entry for 512 coverage.
- Confirm colors pass with theme color meta plus background color field set to valid hex.
Where to store icons for stable manifest paths
Path stability decides whether installs keep working after refactors plus CDN moves. I store all PWA art under icons directory at site root with lower case hyphen names plus versioned folder only on major rebrand.
- Use icons icon-192 plus icon-512 plus maskable-512 as canonical set.
- Avoid query strings in manifest for audit stability and version by file name on change.
Theme-color pairing for splash plus toolbar polish
Theme color plus background color turn a launchable manifest into a polished product moment. I set theme color meta matching header hex plus background color matching splash tile plus icon tile using same brand ramp.
Next steps to L1 plus robots sitemap wiring
Icons alone do not finish discovery plus distribution. I return to the parent L1 favicon generator guide to refresh the full ICO plus 180 plus 192 plus 512 matrix plus head tags, then I wire crawl paths so installable pages stay findable.
Treat the 192 icon as the launcher workhorse and 512 as the splash and store source. Android launchers scale down from high-resolution art, and starting at 512 keeps edges crisp on dense screens. Declare both sizes with explicit purpose values so install prompts never stall on missing assets, generating exact pixels with the image resizer cropper.
Respect the maskable safe zone or watch launchers crop the mark. Keep essential glyphs inside the central circular region of the full icon, letting decorative background bleed to the edges. A mark that looks perfect as a square PNG can lose its edges inside adaptive icon masks without this margin discipline.
Run the Lighthouse PWA audit as the acceptance gate, not a one-time experiment. Installability checks verify icons, manifest, service worker and HTTPS together, and a single missing 512 purpose entry fails the whole category. Green audits across categories mean the icon pipeline genuinely ships for store readiness and user trust without surprises.