PWA Icon Requirements: Every Size You Need in 2026

PWA icons are not favicons with extra steps. They serve a fundamentally different purpose: representing your app as a first-class citizen on the user's device. The requirements are stricter, the failure modes are uglier, and the spec has nuances that catch experienced developers off guard.

This post is a requirements reference. Not theory, not a gentle introduction. If you want the conceptual overview, read our PWA Icons Guide. This is the checklist you open when you're actually building the manifest and exporting the assets.

Why PWA Icons Are Not Favicons

A favicon lives inside the browser. The browser controls the rendering context: tab bar, bookmark list, address bar. You know the size, you know the background, you know the shape. A PWA icon lives outside the browser. The operating system controls everything. Android might render your icon in a circle, a squircle, a rounded square, or a teardrop, depending on the device manufacturer and the user's launcher settings.

This means your PWA icon must survive arbitrary cropping. It must look good at 48 pixels on a notification badge and at 512 pixels on a splash screen. It needs to handle both maskable and non-maskable rendering contexts. Favicons do not deal with any of this.

Every Size You Actually Need

The Web App Manifest spec does not mandate specific sizes. Browsers are supposed to pick the closest available size and scale it. In practice, certain sizes are expected, and missing them means the browser is doing extra work to downscale your icon, which produces blurry results at small sizes.

The non-negotiable two are 192x192 and 512x512. Chrome will reject your manifest install prompt if the 192 is missing. The splash screen will show a blank space without the 512. Everything else is optimization. But if you care about crisp rendering on notification badges and settings screens, provide the full set.

Which Sizes Each Browser Actually Uses

Not every browser fetches every size. Here is what each major browser actually requests from your manifest, based on testing across Chrome, Firefox, Samsung Internet, and Edge in early 2026:

The 192x192 icon is the workhorse. Chrome uses it for the home screen, app drawer, and task switcher. The 512x512 exists almost exclusively for the splash screen. The 48x48 gets pulled for notification badges, and 96x96 shows up in settings lists and permission dialogs.

The Maskable Safe Zone: Inner 80%

When you declare an icon with purpose: "maskable", you are telling the OS it can apply any mask shape to your icon. The spec defines a safe zone: the inner 80% of the image. That means 10% padding on every side.

For a 512x512 icon, the safe zone is 409.6 pixels centered (round to 410). For a 192x192, it is about 154 pixels. Anything outside the safe zone may be clipped. The most aggressive clip is a circle, which cuts roughly 10% from each edge.

The outer 20% must be filled with a solid background color, not transparency. If you leave it transparent, the OS fills it with white or black. On some launchers that produces a visible ring around your icon that looks unfinished.

Purpose Values: any vs maskable vs monochrome

Each icon entry in the manifest has a purpose field. The three allowed values control how the browser and OS render your icon. Getting this wrong is the most common source of PWA icon bugs.

The "any maskable" combined value is technically valid but almost always a bad idea. An icon designed for maskable rendering has too much padding when displayed without a mask. An icon designed for any rendering gets clipped when masked. Use separate files.

Manifest.json: The Complete Setup

Here is a production-ready manifest with the minimum recommended icon set. This covers both rendering contexts at both critical sizes:

{
  "name": "Your App Name",
  "short_name": "App",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#2563eb",
  "icons": [
    {
      "src": "/icons/icon-48.png",
      "sizes": "48x48",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icons/icon-96.png",
      "sizes": "96x96",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "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"
    }
  ]
}

If you also want monochrome support for Android 13+ themed icons, add a seventh entry:

{
  "src": "/icons/icon-monochrome-192.png",
  "sizes": "192x192",
  "type": "image/png",
  "purpose": "monochrome"
}

The monochrome icon should be a white silhouette of your logo on a transparent background. The OS discards the color information and uses only the alpha channel, then applies the user's theme color.

The Full Size Requirement by Browser

Different browsers pull different sizes from your manifest. Here is which sizes each browser actually requests during install and rendering:

Common Mistakes and How to Avoid Them

After reviewing hundreds of PWA manifests, the same mistakes come up repeatedly. Here are the ones that cause the most visible problems:

Using transparent backgrounds on maskable icons. The OS fills transparency with a default color (usually white or black). Your icon ends up floating in a jarring background that does not match your brand. Always use a solid background color for maskable icons.

Providing only one icon for both any and maskable. The padding that makes a maskable icon safe makes an "any" icon look tiny and awkward. These are separate assets with different design constraints.

Forgetting the 512x512 entirely. Without it, the PWA splash screen on Android shows your app name with a blank area where the icon should be. It looks like a broken install.

Using JPEG instead of PNG. JPEG compression artifacts are visible at small sizes, and JPEG does not support transparency. Always use PNG for manifest icons.

Not testing on a real device. Chrome DevTools shows you the manifest is valid, but it does not show you how your maskable icon looks under a circular mask on a Samsung phone. The only way to catch rendering issues is installing the PWA on actual hardware.

Testing Your Icons

Use maskable.app to preview your maskable icons under every mask shape. Load your 512x512 maskable PNG and toggle between circle, squircle, and rounded rectangle previews. If your logo gets clipped under any shape, increase the padding.

In Chrome DevTools, open Application > Manifest. It lists every icon Chrome found and flags issues: missing sizes, invalid types, inaccessible URLs. Run a Lighthouse audit and check the PWA section for icon-related warnings.

For the real test, deploy to a staging URL with HTTPS, open it on an Android device, and tap "Add to Home Screen" from Chrome's menu. Check the home screen icon, open the app to see the splash screen, and look at it in the app drawer and recent apps list. That is four surfaces from one install, and they all use different icon sizes.