Lesson 17 / 30

Web app icons

Provide 192px and 512px PNG icons, add maskable versions and configure the manifest icons field for every platform.

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.