Web app icons

Icon requirements

Provide at least 192x192 and 512x512 PNG icons for PWA installation. Icons are used on home screens, app switchers, and loading screens. Use square formats with safe areas for text and important details.

Manifest icon configuration

Configure icons in manifest.json with purpose field for different contexts.

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

Output:

Icons properly configured for installation and display across devices.

A common trap

Do not use transparent backgrounds for icons—they may display incorrectly on different platforms. Use solid colors or provide maskable versions.

Icon design best practices

Create adaptable, scalable icons that work across all devices and contexts.