PWA Icon Requirements & Safe Areas: Complete 2026 Guide
2025/08/28

PWA Icon Requirements & Safe Areas: Complete 2026 Guide

Complete reference for PWA icon sizes (192×192, 512×512), the 80% safe zone rule, maskable icons, and manifest.json setup. With Lighthouse fixes & code.

Quick Answer

A PWA needs at minimum two icons in manifest.json: a 192×192 and a 512×512 PNG. For Android adaptive icons, also include maskable variants of both sizes, with all critical content kept inside the central 80% safe zone (10% padding on every side). Use separate icon files for purpose: "any" and purpose: "maskable" — never combine them as "any maskable".

PWA Icon Size Reference

SizeRequired?PurposeUsed by
192×192✅ YesanyChrome install prompt, Android home screen
512×512✅ YesanySplash screens, Play Store preview, high-DPI
192×192 maskable🟡 Strongly recommendedmaskableAndroid adaptive home screen icons
512×512 maskable🟡 Strongly recommendedmaskableAndroid splash on higher-DPI devices
144×144, 168×168, 384×384OptionalanyPixel-perfect rendering on specific screen densities
1024×1024OptionalanyFuture high-DPI displays, marketing assets

Practical minimum: a 192×192 standard + 512×512 standard + 512×512 maskable. Chrome auto-scales between sizes when needed.

The Two Icon Purposes

PWA icons use the purpose field in manifest.json to tell the browser how the icon should be rendered.

purpose: "any" — Standard Icons

  • Rendered as-provided, with transparency preserved.
  • Used by iOS (when added to Home Screen), Windows tiles, macOS Sonoma and earlier, and as a fallback when no maskable icon exists.
  • Design with your full logo edge-to-edge — no extra padding required.

purpose: "maskable" — Adaptive Icons

  • The OS crops the icon into a platform-specific shape (circle, squircle, rounded square, teardrop).
  • Required for Android adaptive icons on modern launchers.
  • Must have an opaque background and respect the 80% safe zone.

⚠️ Avoid purpose: "any maskable"

Combining purposes in a single icon entry is explicitly discouraged by web.dev and Chrome will warn you in DevTools. The reason: a maskable icon has 10% padding on every side. When the OS uses that same image as a standard any icon, the padding is preserved — making your logo appear 20% smaller than other icons on the screen.

Always provide two separate entries in your manifest.

The 80% Safe Zone Rule

The maskable icon specification defines a minimum safe zone as a circular area in the center of the icon with a radius equal to 40% of the icon width. This is equivalent to keeping all critical content within the central 80% of the image.

Full icon size:    512 × 512 px
Safe zone:         410 × 410 px (central 80%)
Padding per side:  51 px (10%)
Safe zone shape:   Circle, radius 205 px from center

What goes where:

  • Inside the safe zone: your logo mark, text, primary visual elements.
  • Outside the safe zone (the 10% outer ring): background color/pattern only. Assume it will be cropped.

The 80% zone exists because the most aggressive mask — a circle — clips approximately 10% from each edge. Any of these mask shapes may be applied:

  • Circle (most restrictive — Pixel, Gnome desktop shortcuts)
  • Squircle (Samsung One UI)
  • Rounded square (Stock Android, iOS-style)
  • Teardrop (some Android launchers)

If your logo extends to the edges, a circular mask will eat into it. The 80% safe zone guarantees survival across every shape.

Complete manifest.json Setup

The recommended manifest uses four separate icon entries — two for standard rendering, two for adaptive icons:

{
  "name": "Your PWA Name",
  "short_name": "YourPWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icons/icon-maskable-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "/icons/icon-maskable-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Don't forget to reference the manifest in your HTML <head>:

<link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#000000" />

The most common mistake when generating maskable icons is reusing the standard logo with no padding — resulting in cropped content on Android. Follow these steps:

  1. Start with a 512×512 source image. Higher resolution gives you more flexibility for scaling down.
  2. Add an opaque background. Use a solid color matching your brand. Transparent backgrounds on maskable icons cause OS-default grey or white to bleed through when masked.
  3. Resize your logo to fit within the central 80%. For a 512×512 icon, scale your logo to fit a 410×410 area centered in the canvas.
  4. Extend background to all edges. The outer 10% ring should contain only the background color — your logo must not touch the edges.
  5. Export both standard and maskable variants. Standard at full bleed (no padding); maskable with the 80% safe zone enforced.
  6. Generate the 192×192 variants by scaling the 512×512 versions down (avoid editing two source files separately).

Faster path: our PWA Icon Generator handles all of this automatically — upload your logo once and get both standard and maskable variants at all required sizes, with live safe-zone preview.

Testing Your PWA Icons

Chrome DevTools (the official method)

The most reliable way to verify your maskable icons:

  1. Open your PWA in Chrome (desktop or Android via remote debugging).
  2. Open DevTools → Application panel.
  3. Find the Icons section in the sidebar.
  4. Toggle "Show only the minimum safe area for maskable icons".

If your logo and critical content remain visible after the trim, your icon is safe across all mask shapes.

Real-device testing

DevTools and online previews don't catch every edge case. Before launch:

  1. Install your PWA on at least one Pixel device (stock Android) and one Samsung device (One UI).
  2. Check the icon in the app drawer, home screen, task switcher, and notification shade.
  3. Verify the splash screen appears with the correct icon at install time.
  4. Test on both light and dark system themes.

Common Errors & Fixes

"Manifest doesn't have a maskable icon" (Lighthouse warning)

Cause: your manifest.json has no icon entry with purpose: "maskable".

Fix: add a separate maskable icon entry (see the manifest example above). Lighthouse only checks that the declaration exists — it does not validate that your image actually respects the safe zone. After adding the entry, manually verify with Chrome DevTools.

PWA icon not showing in Chrome after install on Android

Most common causes, in order of frequency:

  1. Wrong browser: installing via Firefox, Edge, or Samsung Internet often creates a shortcut instead of a true PWA install. Use Chrome on Android.
  2. Missing manifest link: ensure your HTML <head> includes <link rel="manifest" href="/manifest.json">.
  3. Icon 404: open Chrome DevTools → Application → Manifest and check that every icon URL resolves. Relative paths break if the manifest is served from a different directory.
  4. Stale install: uninstall the PWA from Settings → Apps and reinstall via Chrome.

White background appearing around your icon on Android

Cause: you used a transparent PNG as a maskable icon. The Android OS fills transparent pixels with a default color (usually grey or white) before applying the mask.

Fix: regenerate the maskable variant with an opaque background matching your brand color. Standard any icons can stay transparent.

Icon looks too small on the home screen compared to other apps

Cause: you're using a maskable icon for the standard any purpose (often via "any maskable"). The 10% padding designed for masking is being preserved when rendered un-masked.

Fix: provide separate icon files — one full-bleed for purpose: "any", one with safe-zone padding for purpose: "maskable".

Platform-Specific Notes

Android (WebAPK)

When a PWA is installed on Android via Chrome, the system generates a WebAPK — a real Android package — using your manifest icons. Maskable icons are used for the adaptive home screen icon; standard icons are used for the install banner.

iOS

iOS does not read the manifest icons array. Instead, it uses apple-touch-icon. Include this in your HTML:

<link rel="apple-touch-icon" href="/icons/apple-touch-icon-180.png" />

The recommended size is 180×180 PNG with no transparency — iOS will composite a white background under transparent areas. For full coverage, also provide splash-screen images via apple-touch-startup-image.

Windows & macOS

  • Windows PWA: uses the any icon for taskbar and tile rendering. Maskable icons are ignored.
  • macOS Sonoma+: uses maskable icons for the Dock when available, falling back to any.

Best Practices Summary

  • Provide separate icon files for purpose: "any" and purpose: "maskable".
  • Design maskable icons with 10% padding on every side and an opaque background.
  • Keep file sizes under 100KB per icon (PNG optimization).
  • Always provide at least 192×192 and 512×512.
  • Include apple-touch-icon (180×180) for iOS compatibility.
  • Test with Chrome DevTools' safe-area toggle before shipping.

FAQ

What size should a PWA icon be?

A PWA needs at minimum a 192×192 and a 512×512 PNG icon declared in manifest.json. The 192×192 is required by Chrome's install prompt; the 512×512 is used for splash screens and high-DPI displays. For Android adaptive icons, also include maskable variants of both sizes.

Do I need both 192×192 and 512×512 PWA icons?

Yes. Chrome's installability audit requires both. The 192×192 is used in the install prompt and home screen at standard density, while the 512×512 powers splash screens, app store previews, and high-DPI rendering.

Should I use "purpose": "any maskable" in my manifest?

No. Chrome warns against this and web.dev explicitly discourages it. Combining purposes forces a maskable icon (which has padding) to be used as a standard icon, making it look too small.

How do I fix the "Manifest doesn't have a maskable icon" Lighthouse warning?

Add at least one icon entry to your manifest.json with purpose set to "maskable". The icon must be a separate file designed with the 80% safe zone — do not use "any maskable" as a shortcut.

Can I use SVG for PWA icons?

Not reliably. SVG support across PWA contexts is inconsistent — Chrome supports SVG manifest icons, but iOS Safari and some Android launchers do not. Stick with PNG at 192×192 and 512×512 minimum.

Why is my PWA icon not showing in Chrome on Android?

Most often: you installed via the wrong browser (use Chrome, not Firefox/Edge), or the manifest link is missing from your HTML head, or an icon URL is returning 404. Open DevTools → Application → Manifest to verify.

  • PWA Icon Generator — upload your logo and download a complete PWA icon set (192, 512, maskable variants) with live safe-zone preview.
  • App Icon Generator — generate full iOS and Android adaptive icon sets from a single source.
  • Favicon Generator — create favicon.ico and all browser favicon variants from your PWA icon.
All Posts

Author

avatar for yifu
yifu

Categories

    More Posts

    Newsletter

    Join the community

    Subscribe to our newsletter for the latest news and updates