Progressive Web App Icon Requirements

Progressive Web Apps (PWAs) have specific icon requirements that differ from standard website favicons. Understanding these requirements is essential for creating installable, professional PWAs.

PWA Icon Sizes

PWAs require multiple icon sizes for different contexts:

• 192x192: Minimum required size for Android
• 512x512: Required for splash screens and high-resolution displays
• Additional sizes: 48x48, 72x72, 96x96, 144x144 for various Android devices
• iOS sizes: 60x60, 76x76, 120x120, 152x152, 180x180 for Apple devices

Manifest.json Configuration

Icons must be properly declared in your manifest.json file:

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

Icon Design Guidelines

PWA icons should follow these design guidelines:

• Use square icons (they'll be automatically masked on some platforms)
• Keep important content within the center 80% to avoid cropping
• Use high contrast for visibility
• Avoid text unless it's essential and large enough
• Test icons at all required sizes

Implementation Best Practices

• Provide all required sizes for maximum compatibility
• Use PNG format with transparency support
• Ensure icons are optimized for file size
• Test PWA installation on multiple devices
• Verify icons appear correctly in app launchers

Using Our Tools

Our free favicon generator (logo to favicon converter) automatically creates all required PWA icon sizes and generates a properly formatted manifest.json file. This ensures your PWA meets all icon requirements with minimal effort.

For framework-specific PWA implementation, see our guides: Next.js PWA favicon, React PWA favicon, HTML PWA favicon, and WordPress PWA favicon.