PWA Icon Sizes - 192x192 and 512x512 Explained

Progressive Web Apps need two core manifest icon sizes: 192x192 for home screen shortcuts and 512x512 for splash screens and install banners. These PNG files live in your Web App Manifest icons array, separate from browser tab favicons. Missing either size is the top reason Android shows a generic gray icon after install.

This guide explains what each dimension does, how to structure manifest entries, maskable icon rules, and how to audit icons on a live URL before users add your app to their home screen.

Why PWA icons are not favicons

Browser tabs load icons from link rel="icon" tags and /favicon.ico. Installed PWAs and Android home screen shortcuts load from manifest.json:

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

Inside the manifest:

"icons": [
  { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
  { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" }
]

If you only set up tab favicon sizes and skip the manifest, tabs look fine while the installed app looks broken.

Full stack overview: Favicon Sizes Explained.

192x192 - home screen and app drawer

192x192 px is the workhorse size for Android launchers. Chrome uses it when:

• User adds site to home screen
• PWA appears in app drawer after install
• Shortcuts list shows your brand mark

Design notes:

• Square PNG, no transparency tricks required but solid backgrounds look cleaner
• Export from 512 px master, downscale with sharp filtering
• Declare exact size in "sizes": "192x192"

Some checklists accept a single 512x512 icon and let the OS downscale. Explicit 192x192 avoids blur on mid-density phones and satisfies Lighthouse PWA audits.

512x512 - splash screen and install UI

512x512 px appears in:

• Android PWA splash screen while app loads
• Chrome install prompt artwork
• Store-style presentation for installable web apps

Splash screens combine manifest background_color, theme_color, name, and the 512 icon. A low-resolution source here looks embarrassingly soft on large phones.

Export at full 512x512. Do not upscale from 192.

background_color and theme_color matter

{
  "background_color": "#ffffff",
  "theme_color": "#1a73e8",
  "icons": [
    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Mismatch between icon background and background_color creates a visible seam on splash.

Maskable icons and purpose field

Android 8+ supports adaptive icons with circular masks. Add icons with "purpose": "maskable" or combine "any maskable":

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

Maskable artwork keeps the logo inside the center safe zone (roughly 80% diameter). Full-bleed logos get cropped at edges.

Recommended set for production:

Minimum viable: 192 and 512 with "purpose": "any".

Complete manifest example

{
  "name": "My Product",
  "short_name": "Product",
  "description": "Installable web app",
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#3367d6",
  "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-192-maskable.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "/icons/icon-512-maskable.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Link the manifest in HTML. See How to Add a Favicon to Your Website for head tag placement alongside favicons.

Export workflow from one master

1. Create 512x512 square brand master (vector preferred).
2. Export 512x512 PNG for manifest.
3. Downscale to 192x192 PNG with sharp pixel alignment.
4. Duplicate master with extra padding for maskable variants.
5. Optionally bundle 16/32 into favicon.ico for tabs (create favicon.ico guide).

Never chain upscale from 32x32 tab art to 512x512 PWA icons.

Common PWA icon mistakes

Empty icons array

Templates ship "icons": []. Fix before calling the app a PWA.

404 on icon paths

Manifest parses but icons fail fetch. Always hit icon URLs directly after deploy.

Wrong sizes string

File is 256x256, JSON says "512x512". Audits fail, scaling looks wrong.

SVG only in manifest

Android Chrome expects PNG for reliable install icons. Ship PNG in production.

Missing apple-touch-icon for iOS

PWA manifest icons do not replace 180x180 apple-touch-icon. See Apple Touch Icon Size Guide.

Icons on CDN without CORS

Cross-origin manifest icons need proper CORS headers when origin differs.

Debugging missing PWA icons

Symptoms and fixes overlap with Android PWA Icon Missing from Manifest. Quick checks:

1. DevTools Application > Manifest - icon list and errors
2. Lighthouse PWA section
3. Favicon Check - manifest parse + icon download

Remove old home screen shortcut after fixing files. Android caches aggressively.

Lighthouse and installability criteria

Chrome Lighthouse PWA audits check that manifest icons include 192x192 and 512x512 with correct sizes strings. Failing icons block a perfect PWA score even when service worker and HTTPS are fine.

Installability in Chrome also requires other fields: name, start_url, display, theme_color. Icons are necessary but not sufficient. Fix manifest icons first because they are visible to end users immediately.

Use Lighthouse in CI on staging URLs after each deploy that touches public/icons/ or manifest JSON. Pair automated runs with manual Favicon Check scans for faster iteration than full Lighthouse on every commit.

Splash screen composition in detail

When a user launches an installed PWA, Android builds a splash from:

• background_color filling the screen
• Centered 512x512 icon (or best available large icon)
• Optional app name from name field

If your 512 icon is photographic or has transparency holes, the splash looks uneven against background_color. Use flat brand color behind the mark in the 512 PNG itself for seamless presentation.

theme_color colors the status bar during launch. Mismatch between status bar, splash background, and icon padding reads as unfinished polish.

Test install on a mid-range Android device, not only emulators. Emulators hide compression and scaling quirks real hardware shows.

Staging vs production icon audits

Teams often verify PWA icons on localhost where manifest paths differ from production. Always scan the public URL users install from.

Common staging gaps:

• Basic auth blocking manifest or icon fetches from external audit tools
• Relative icon paths that work on localhost subpaths but fail on CDN root
• Missing icon folder in production deploy script

Run Favicon Check against production after DNS cutover. Compare icon byte sizes to staging to catch wrong asset promotion.

Icon design for small launcher grids

Android launcher grids compress many apps into tight rows. Your 192x192 icon competes with native apps that follow Material guidelines. High contrast and centered glyphs win at a glance.

Avoid thin outline icons that disappear on colorful wallpapers. Test the 192 PNG on both light and dark launcher themes if your target users customize Android themes heavily.

The 512 asset matters for first impression during install and splash. Invest design time there even if you think users only see 192 in the drawer.

Coordinating with designers and developers

Design handoff should include labeled exports:

• icon-192-any.png
• icon-512-any.png
• Optional maskable variants with safe zone guides overlay

Developers map filenames to manifest JSON. Mismatch between filename and sizes field causes Lighthouse warnings.

Run a joint review on staging: designer installs PWA on Android phone, developer confirms manifest fetch in Favicon Check. Catch padding and color issues before marketing announces install support.

Cross-link implementation docs to How to Add a Favicon to Your Website so manifest link tag is not forgotten alongside icons folder.

How 192 and 512 relate to other sizes

Each size serves a distinct surface. One 512 px file cannot replace thoughtful exports for smaller contexts without quality loss.

FAQ

What PWA icon sizes are required?

Minimum 192x192 and 512x512 PNG in manifest icons. Maskable variants recommended for Android.

Can I use only 512x512?

Chrome may downscale for 192 contexts. Explicit 192x192 is best practice and audit-friendly.

What format for PWA manifest icons?

PNG with "type": "image/png". Avoid JPEG for logos with flat colors.

What is a maskable icon?

An icon designed for OS-shaped masks with safe-zone padding. Declared with "purpose": "maskable".

Do PWA icons replace favicon.ico?

No. Keep tab favicons and root favicon.ico. Manifest icons are additional.

Where do I put manifest icon files?

Typically /icons/ or site root. Paths in src must match deploy output.

How do I test PWA icon sizes live?

Run Favicon Check. It reads manifest icons and reports HTTP status and dimensions.

Why does install work but splash looks wrong?

Often wrong background_color or a soft 512x512 source. Re-export at full resolution with matching colors.

Bottom line

PWAs need 192x192 and 512x512 PNG icons in the Web App Manifest, plus maskable versions when you want polished Android adaptive icons. Export from a high-quality square master, link the manifest in server HTML, and verify with Favicon Check. Tab favicons and manifest icons work together, not as substitutes.