PWA Icon Requirements & Safe Areas: Complete 2026 Guide

Quick Answer

The PWA Icon Generator can export 192px and 512px PNGs and a manifest. These are useful starting sizes for the tool's workflow. The manifest specification does not impose a universal two-file minimum, and icon files alone do not make a website a complete installable PWA. Browser installation rules also depend on the page and browser version.

PWA Icon Size Reference

Chrome's install-promotion guidance includes 192px and 512px icons, HTTPS and other page/manifest conditions. Those criteria belong to a browser workflow, not a universal minimum imposed by the manifest specification. Manual installation can follow different rules. A larger source does not automatically make tiny detail readable.

The Two Icon Purposes

Use any for standard artwork shown without a mask. Use maskable for artwork prepared for launcher cropping, with an intentional background and essential details in the safe circle. A transparent logo stretched to the edges is not automatically suitable for both.

purpose: "any" — Standard Icons

Use any for standard artwork that remains readable without a launcher mask. Transparency is a design choice, not a universal requirement.

purpose: "maskable" — Adaptive Icons

Use maskable for artwork prepared for launcher cropping, with an intentional background and essential details inside the safe circle.

⚠️ Avoid purpose: "any maskable"

This original heading describes a design tradeoff, not a syntax prohibition. The syntax is valid. Use it only if the same artwork works with and without a mask. Separate standard and maskable files are a design recommendation, not a syntax requirement.

The 80% Safe Zone Rule

For a 512px square, the safe circle has radius 204.8px, centered at (256, 256). Its diameter is 409.6px. This is a circle, not a 410px safe square. A square of side 409.6px has corners about 289.6px from the center, outside the safe radius.

For a square symbol, a centered side length of about 289px fits inside this circle. This calculation is a conservative starting point for square artwork, not a requirement to shrink every shape equally. A rounded or circular design can use the space differently. Inspect all essential parts with the overlay.

The 80% figure describes the circle’s diameter. Ten percent at each edge does not make the corners of an 80%-wide square safe. See the manifest specification.

Complete manifest.json Setup

The code below assumes the example maskable files are under /icons/ and that you separately generated the two standard PNGs. Match every URL to a real file.

{
  "name": "Example app",
  "short_name": "Example",
  "start_url": "/",
  "display": "standalone",
  "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/maskable-icon-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" },
    { "src": "/icons/maskable-icon-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ]
}

<link rel="manifest" href="/site.webmanifest">

purpose: "any maskable" is allowed by the manifest syntax. Separate images are a design recommendation because a padded maskable image can look small when used without a mask; it is not a syntax prohibition.

Creating Maskable Icons from Your Logo

Download our original SVG, open Maskable Icon Generator, set padding to 25%, artwork scale to 100% and background to #ffffff, then generate. The resulting square artwork occupies half the canvas width, safely inside the circle. Compare your output with the actual example ZIP.

Do not bake a round crop into the PNG. Let the launcher apply its shape. A solid background avoids an unexpected fill behind transparent pixels.

Testing Your PWA Icons

Check the deployed files before comparing the installed display. A favicon tab test and a PWA launcher test are separate checks.

Chrome DevTools (the official method)

On the deployed page, open Application → Manifest in Chrome. Check the manifest URL, loaded images, dimensions and reported errors; enable the maskable safe-area preview where available. The DevTools PWA guide explains this workflow. Record the browser version instead of relying on an old Lighthouse warning name.

Real-device testing

Install on a device your project supports and inspect the standard and cropped contexts separately. A browser-tab favicon is another check. Before testing by removing and reinstalling an app, consider its local data and sign-in state; reinstalling is a diagnostic, not a general update strategy for users.

Common Errors & Fixes

Record the actual error, browser version and public URL. Fix file access before changing the artwork.

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

Check the diagnostic wording and browser version. Verify a reachable image with purpose maskable and inspect its artwork inside the circular safe zone. A particular Lighthouse audit may not exist in every version.

PWA icon not showing in Chrome after install on Android

Inspect the manifest loaded by the real start page, each image URL, the declared dimensions and any redirects or authentication. Then check installation conditions and cached or already-installed state in the target browser.

White background appearing around your icon on Android

Inspect transparency and which manifest purpose is selected. Prepare an intentional opaque maskable background and keep essential detail in the safe circle; launcher behavior can vary.

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

Check whether the padded maskable image is also being used without a mask. Use fuller standard artwork and a separate maskable variant when that fits the design.

Platform-Specific Notes

Inspect the actual browser and installation route your project supports.

Android (WebAPK)

Compare more than one simulated crop and check a real launcher. A PWA manifest is not the native Android package with adaptive foreground/background resources. For a native app, use the Android guide.

iOS

Check the website's Home Screen icon on supported iOS versions. A dedicated apple-touch-icon link is a separate integration option described in Apple's archived Web Clip guide. The Apple Touch tool prepares an opaque 180px PNG. Do not treat the PWA maskable rule as a native iOS asset requirement.

Windows & macOS

Install in the actual browser and inspect the desktop, taskbar or Dock icon. These surfaces need not crop like Android. Providing manifest icons does not require adding old msapplication-* tile declarations to every modern site.

Best Practices Summary

Keep the editable source, inspect the smallest export, verify every manifest URL, check the circle and test on relevant devices. Distinguish standard from maskable artwork and publish the manifest and images together. These checks help review implementation without promising installation or display on every platform.

What is the safe zone for maskable PWA icons?

The safe zone is a centered circle with a radius of 40% of the smaller image dimension. The 80% figure is the diameter, not a safe square: its corners can be cropped. Check all essential artwork against the circle.

How large should each PWA icon file be?

Reduce file size without losing the small shape or text, and measure delivery on the target connection. There is no universal 100 KB limit or guaranteed installation-delay threshold for every icon.

Do PWA icons need transparency?

A standard icon may use transparency when appropriate. For maskable artwork, use an intentional opaque background to avoid an unexpected fill after cropping; transparency is not a universal requirement for standard artwork.

How do I test if my maskable icon will look right?

Inspect the images and maskable overlay in Chrome DevTools Application → Manifest, where available, and then test on supported devices or launchers. Simulated shapes do not certify every installed display.

FAQ

The answers below distinguish browser install-promotion conditions from the general manifest syntax.

What size should a PWA icon be?

For this workflow, start with 192×192 and 512×512 PNGs. Chrome lists both in its install-promotion criteria; the manifest specification does not impose this pair on every browser or manual installation path. Add separately prepared maskable artwork when needed.

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

Both sizes appear in Chrome’s install-promotion criteria. Keeping both is a practical baseline, but a manifest file and two icons alone do not establish complete installability.

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

The syntax is valid. Use it only if the same artwork works with and without a mask. Separate standard and maskable files are a design recommendation, not a syntax requirement.

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

Check the diagnostic wording and browser version. Verify a reachable image with purpose maskable and inspect its artwork inside the circular safe zone. A particular Lighthouse audit may not exist in every version.

Can I use SVG for PWA icons?

Support depends on the browser and display surface. Keep PNG for targets that need raster and test SVG through the real installation path; displaying SVG inside an ordinary page does not prove launcher support.

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

Inspect the manifest loaded by the real start page, each image URL, the declared dimensions and any redirects or authentication. Then check installation conditions and cached or already-installed state in the target browser.

Related Tools

The geometry and purpose semantics come from the Web App Manifest specification. web.dev's maskable guide explains separate artwork and DevTools checks. Native Android adaptive resources use a different workflow: see Android Adaptive Icons. Send guide corrections through About and contact.