PWA Icon Generator

Progressive Web Apps (PWAs) are growing at 47% year-over-year adoption, but most developers underestimate the icon's role in converting browsers to installers. The PWA icon is not decorative—it's the install trigger. When users see your app icon on their home screen, app drawer, or device share sheet, that visual moment determines whether they perceive your PWA as a "real app" or a "website shortcut." Apple's iOS 18 and Chrome's latest PWA enhancements have made icon requirements stricter and more complex, demanding both maskable and regular icon variants that render correctly across 40+ device types. Getting the icon spec wrong doesn't just look unprofessional; it can reduce installation rates by 20-35% according to web developer surveys.

Last updated: April 2026 | By IconikAI Team

What Is the Maskable Icon Safe Zone?

The maskable icon specification (added to the Web App Manifest in 2020) defines a "safe zone" where critical design elements must live. This is crucial for PWAs because different devices apply different mask shapes—iOS uses a rounded square, Android uses a circle, and desktop browsers use a square.

The safe zone is defined as the center 80% of your icon canvas:

• For a 192x192 icon, the safe zone is 153x153px (centered)
• For a 512x512 icon, the safe zone is 409x409px (centered)
• Critical elements (logo, text, recognizable shapes) must fit entirely within this zone

Why this matters: If your icon has fine details outside the safe zone, they'll be clipped on some devices and visible on others. This creates a jarring visual inconsistency that makes your PWA look unpolished.

Manifest.json Icon Array: Complete Code Example

Here's the standard PWA manifest.json structure with both regular and maskable icons:

{
  "name": "My Awesome PWA",
  "short_name": "MyPWA",
  "description": "A web app that works everywhere",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#2D5BFF",
  "background_color": "#F8F5F0",
  "scope": "/",
  "icons": [
    {
      "src": "/images/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/images/icon-192-maskable.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "/images/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/images/icon-512-maskable.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "screenshots": [
    {
      "src": "/images/screenshot-540x720.png",
      "sizes": "540x720",
      "type": "image/png"
    }
  ]
}

Key fields:

• "purpose": "any" — Standard icon, visible on all backgrounds
• "purpose": "maskable" — Icon designed to work with OS-applied masks (iOS, Android 13+)
• Always provide both; devices fall back to "any" if maskable is missing

Why PWA Icons Need Both Regular and Maskable Versions

This is the most common PWA icon mistake. Here's why you need both:

Regular Icon ("purpose": "any")

• Used by all devices without OS-level masking
• Safe zone doesn't apply (design fills the entire canvas)
• Required for older Android devices, desktop browsers, and fallback scenarios
• Should have a solid background or subtle transparency

Maskable Icon ("purpose": "maskable")

• Used on iOS, modern Android (13+), and newer Chrome browsers
• The OS applies a shape mask (circle on Android, rounded square on iOS)
• Must adhere to the safe zone (center 80%)
• Can have full transparency; the mask defines the visible shape
• Allows creative "edge-to-edge" designs that adapt to any mask shape

If you only provide one icon type, your PWA will either look clipped (on iOS) or have awkward safe zones (on Android). IconikAI's PWA icon generator automatically generates both variants from a single description.

Recommended PWA Icon Sizes and Specifications

Size	Purpose	Format	Notes
192x192	Splash screens, manifest default	PNG	Minimum recommended size
384x384	Medium displays, tablets	PNG	Optional but recommended
512x512	High-res displays, stores	PNG	Maximum practical size
1024x1024	Google Play Store listing	PNG	If distributing via Google Play
96x96	Favicon fallback	PNG/ICO	Smaller backup for browser tab

File size consideration: Aim for under 100 KB per icon file. Larger files delay app installation on slow networks (which is 40% of global users). Modern PNG compression and IconikAI's optimized export keep files small while maintaining quality.

Creating PWA Icons with AI: Step-by-Step

1. Describe your app — "A meditation app with AI-powered breathing exercises" or "A project management tool for remote teams"
2. Choose the PWA style — IconikAI offers PWA-optimized presets that work with maskable safe zones
3. Select primary colors — Ensure sufficient contrast (WCAG AA: 4.5:1 for text, 3:1 for graphics)
4. Generate regular and maskable variants — AI creates both simultaneously
5. Download all sizes — 192x192, 384x384, 512x512 + maskable versions
6. Test on device — Install your PWA on iOS and Android to verify rendering
7. Optimize file size — Confirm icons are under 100 KB each

Testing Your PWA Icon Across Devices

Before launching to users:

1. iOS Test — Add to home screen; verify the icon appears with correct colors and no clipping
2. Android Test — Install on Android 12 and Android 13+ devices; check both adaptive icon (circle mask) and regular rendering
3. Desktop Test — Check Chrome, Edge, and Firefox to ensure the favicon and app window icon render correctly
4. Tablet Test — Open on iPad and Android tablet; confirm the larger safe zone is used correctly
5. Splash Screen Test — Some devices show your icon on the splash screen during app load; verify it looks good at small sizes

Testing tool: Use lighthouse PWA audit or IconikAI's preview feature to validate your manifest before publishing.

Common PWA Icon Mistakes (and How to Avoid Them)

Mistake 1: Using a non-maskable icon everywhere Result: Icon looks clipped on iOS and Android 13+ devices. Solution: Always provide maskable icon with centered safe zone.

Mistake 2: Not including a 512x512 icon Result: Missing from Google Play and some app stores. Solution: Provide 512x512 for all icon purposes.

Mistake 3: Ignoring safe zone in maskable variant Result: Logo or text clips off on circular Android icons. Solution: Keep critical elements in center 80%.

Mistake 4: File sizes over 150 KB per icon Result: Slower installation on 3G/4G networks. Solution: Use modern PNG compression; aim for under 100 KB.

Mistake 5: Not testing manifest.json syntax Result: Icons don't load; manifest validation errors in DevTools. Solution: Use online manifest validator before deployment.

Frequently Asked Questions

Can I use SVG for PWA icons? No. PWAs require raster formats (PNG, WebP). SVG support is not standardized across devices yet, and rendering behavior is unpredictable.

What's the difference between maskable and monochrome icons? Maskable: You design the full icon; the OS applies a shape mask. Monochrome: You provide a single-color silhouette; the OS fills it with theme color. Use maskable for most PWAs unless you're targeting very old Android devices.

Do I need a separate icon for dark mode? No. Set theme_color in manifest to a neutral shade, and design icons with good contrast on both light and dark backgrounds. Modern PWAs auto-apply dark/light theming without separate icon files.

How often should I update my PWA icon? Every 12-24 months to stay current with design trends. Updated icons signal active development and can improve install conversion rates.

Can I animate my PWA icon? No. Static PNG/WebP only. Animated icons are not supported in manifest specifications, though some browsers show animated favicons in browser tabs.

---

Create Your PWA Icon Now

Generate a professional, maskable, iOS and Android-ready PWA icon in seconds with IconikAI. Get both regular and maskable variants automatically, plus manifest.json configuration help.

Generate Your PWA Icon — Free

Also need store-ready screenshots? Create PWA splash screens and app store screenshots with just one click.

Building a full PWA from scratch? Custom web app development starting at $1,000 includes design, development, app store deployment, and PWA optimization.