PWA icons and splash screens

1. Minimum set that works

2. Manifest example

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

3. Maskable icons

Android may crop icons into a circle/squircle. Keep important content inside the safe zone (center ~80%). Do not put logo text near the edges.

4. Splash screens

• Chrome/Android: can generate splash from manifest background_color, theme_color, name and icon.
• iOS: historically needed many apple-touch-startup-image links; behavior varies by iOS version. Keep a solid background_color close to your first screen.

5. Why icons look wrong on iPhone

• Only manifest icons were provided - Safari wants apple-touch-icon.
• Icon has transparency that becomes black/white unexpectedly.
• Logo is too close to edges and gets cropped.
• Cached old icon - delete home screen shortcut and add again after deploy.