PWA Icon Requirements: The Complete 2025 Checklist

Shipping a polished, installable Progressive Web App (PWA) means sweating the details—especially the icons. From the home screen to splash screens, task switchers to OS integrations, your PWA icons are the digital face of your app. But what are the actual icon requirements in 2025? Which sizes, formats, and manifest entries do you need to cover all major platforms and scenarios? Here’s a complete, practical checklist to make your PWA icons bulletproof.

Why PWA Icons Matter

Icons are more than just a nice-to-have. They’re a core part of the PWA install experience, impacting:

• User trust: Professional, sharp icons help users recognize and trust your app.
• Branding: Consistent app icons reinforce your brand identity across devices.
• OS integration: The right icon sizes and formats ensure crisp rendering on Android, Windows, iOS (via Safari), and desktop browsers.
• Discoverability: Some platforms or stores may reject PWAs with missing or malformed icons.

Let’s break down exactly what you need for robust, future-proof manifest icons in your PWA.

Manifest Icons: The Heart of PWA Icon Configuration

The icons array in your Web App Manifest tells browsers and OSes which icon images to use for your PWA. Each icon object can specify:

• src: Path to the image file
• sizes: Pixel dimensions (e.g., "192x192")
• type: MIME type (e.g., "image/png")
• purpose: (Optional) "any", "maskable", or "monochrome"

Example manifest snippet:

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

Why Multiple Sizes?

Different platforms and contexts use different icon sizes:

• Android and Chrome use 192x192 and 512x512 for home screen and splash screens.
• Windows tiles, task switchers, and some desktop OSes may require different resolutions.
• iOS (via Web App Manifest in Safari) now respects certain manifest icons, but has its own quirks.

Including a comprehensive set ensures your icon always looks crisp and never gets upscaled or distorted.

The 2025 PWA Icon Checklist

Here’s the definitive set of icon sizes and formats to include for maximum compatibility in 2025:

Essential Icon Sizes

Include these PNGs for universal support:

• 192x192 — Chrome, Android, Windows, task switchers
• 256x256 — Windows, some Linux desktops
• 384x384 — Chrome splash screen (high-res devices)
• 512x512 — Chrome/Android install, Play Store, Windows, macOS
• 1024x1024 — iOS splash screens (optional but recommended for large devices)

For each, use a transparent PNG for the best results. Example:

"icons": [
  { "src": "/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" },
  { "src": "/icons/icon-256x256.png", "sizes": "256x256", "type": "image/png" },
  { "src": "/icons/icon-384x384.png", "sizes": "384x384", "type": "image/png" },
  { "src": "/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png" },
  { "src": "/icons/icon-1024x1024.png", "sizes": "1024x1024", "type": "image/png" }
]

Modern Formats: SVG and Maskable Icons

• SVG: Add at least one SVG icon for future-proofing and perfect scaling on modern browsers.
• Maskable: At least one icon with "purpose": "maskable" for adaptive home screen integration (especially Android).

Example:

{
  "src": "/icons/icon.svg",
  "sizes": "any",
  "type": "image/svg+xml",
  "purpose": "any maskable"
}

Maskable icons let the OS crop your icon into any shape (circle, squircle, etc.) without losing key visuals. Design your maskable icon with a safe area and background that fills the full canvas.

Monochrome Icons (Optional, for Modern OS Features)

For platforms that support monochrome icons (like Windows 11 taskbar), add:

{
  "src": "/icons/icon-monochrome.svg",
  "sizes": "any",
  "type": "image/svg+xml",
  "purpose": "monochrome"
}

This is optional, but a nice enhancement for system integration.

Icon Design Best Practices

• Keep it simple: Avoid small text and intricate details.
• Transparent background: Use transparency for flexibility across backgrounds.
• Safe area: For maskable icons, keep key elements inside a central circle/square.
• Test in context: Use emulators and devices to preview how your icons render.

Manifest Icon Entry Reference

Here’s a robust, up-to-date sample for 2025:

"icons": [
  {
    "src": "/icons/icon-192x192.png",
    "sizes": "192x192",
    "type": "image/png",
    "purpose": "any"
  },
  {
    "src": "/icons/icon-256x256.png",
    "sizes": "256x256",
    "type": "image/png",
    "purpose": "any"
  },
  {
    "src": "/icons/icon-384x384.png",
    "sizes": "384x384",
    "type": "image/png",
    "purpose": "any"
  },
  {
    "src": "/icons/icon-512x512.png",
    "sizes": "512x512",
    "type": "image/png",
    "purpose": "any maskable"
  },
  {
    "src": "/icons/icon-1024x1024.png",
    "sizes": "1024x1024",
    "type": "image/png",
    "purpose": "any"
  },
  {
    "src": "/icons/icon.svg",
    "sizes": "any",
    "type": "image/svg+xml",
    "purpose": "any maskable"
  },
  {
    "src": "/icons/icon-monochrome.svg",
    "sizes": "any",
    "type": "image/svg+xml",
    "purpose": "monochrome"
  }
]

Don’t Forget: Apple Touch Icons for iOS

Even though iOS has started supporting the Web App Manifest, it’s still wise to include the legacy Apple touch icon for backward compatibility:

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

Include at least a 180x180 PNG for best results.

Automating Icon Generation

Manually creating all these icon sizes can be tedious. You can streamline the process with tools like:

• PWABuilder
• RealFaviconGenerator
• Favicon.io
• Tools like IcoGenie and others offer AI-powered SVG icon generation, which can help you create scalable, maskable icons with ease.

These tools often generate all required manifest icons and provide copy-paste manifest snippets.

Validating Your PWA Icon Setup

After updating your manifest, always:

1. Test on real devices: Add your PWA to Android, Windows, and (if possible) iOS.
2. Validate the manifest: Use Lighthouse or Chrome DevTools’ PWA Audit.
3. Check for warnings: Missing or low-res icons will show up as warnings in the install prompt or DevTools.
4. Preview splash screens: Make sure your icon looks good on all backgrounds and shapes.

Common Gotchas and Troubleshooting

• Wrong sizes: If you see blurry or pixelated icons, check that your PNGs are truly at the declared resolution.
• Missing maskable: Android may show a white circle around your icon if maskable is missing.
• SVG support: Not all platforms support SVG icons yet; always include PNG fallbacks.
• Manifest caching: Clear your browser cache or use a new service worker version to force browsers to reload updated icons.

Key Takeaways

• Include multiple icon sizes (at least 192x192, 256x256, 384x384, 512x512, and 1024x1024 PNGs).
• Add SVG and maskable icons for crisp, future-proof rendering.
• Specify icon purposes ("any", "maskable", "monochrome") for OS customizations.
• Don’t forget iOS: Still include an Apple touch icon.
• Automate icon generation with tools to save time and avoid mistakes.
• Test everywhere: There’s no substitute for real-device testing.

Well-defined PWA icons help your progressive web app look and feel native, no matter where users install it. With this checklist, you’ll cover every modern platform and ensure your app makes a great first impression—every time.