Guide · pwa
PWA icon sizes: 192, 512, and maskable explained
October 23, 2026 · 11 min read
PWAs install when the web app manifest declares the right icons. Chromium looks for at least 192×192 and 512×512. Android launchers also want maskable artwork so they can crop to a circle or squircle without cutting the logo. Wrong sizes mean no install prompt, or a clipped home-screen icon.
purpose: any
Icons with purpose any are shown mostly as-is: square PNGs for install UI, task switchers, and places that do not apply a hard mask. Provide at least 192 and 512. A 1024 master helps when the OS downscales, but it is optional in the manifest if 512 is sharp.
Use transparency only when the mark stays readable on light and dark shelves. Many teams bake a solid brand plate behind any icons so small sizes stay crisp.
purpose: maskable
Maskable icons are built for cropping. Keep critical content inside the central safe zone (about 80% of the canvas). Outside that zone, Android may cover the edges with the launcher mask.
Ship separate maskable files, or a correctly padded dual-purpose icon. Do not label a tight any icon as maskable. Chromium's checks and real devices will crop your logo.
Manifest icons array
Each entry needs src, sizes, type, and purpose. List any and maskable separately when padding differs. Point src at stable URLs under your origin (root-relative paths are fine).
Also set name, short_name, start_url, display, background_color, and theme_color. Icons alone do not make a PWA; installability is a bundle of requirements.
- 192×192 purpose any
- 512×512 purpose any
- 192×192 purpose maskable
- 512×512 purpose maskable
- theme_color and background_color aligned with splash
Why the install prompt still fails
Common causes: wrong MIME type on the manifest, icons 404 after a CDN path change, only 192 without 512, HTTP on a preview host, or a broken display/standalone setting. Chrome's Application panel → Manifest shows the warnings; fix those before blaming icon design.
On iOS, Add to Home Screen leans on apple-touch-icon more than the manifest. Ship both if you care about iPhone home screens and Android install.
Generate and verify
Export any + maskable 192/512 from the PWA icon generator, put them next to manifest.webmanifest, open the site over HTTPS, and run Lighthouse's PWA section once. Re-check after every logo change; stale 512s show up often in production.