Иконки и splash-экраны PWA

1. Минимальный набор

2. Пример в manifest

"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-иконки

Android может обрезать иконку в круг/скруглённый квадрат. Важное держите в безопасной зоне (центр ~80%). Не ставьте текст логотипа у краёв.

4. Splash-экраны

• Chrome/Android: splash может собраться из background_color, theme_color, имени и иконки.
• iOS: раньше нужны были пачки apple-touch-startup-image; поведение зависит от версии iOS. Держите background_color близким к первому экрану.

5. Почему на iPhone иконка кривая

• Дали только manifest icons - Safari хочет apple-touch-icon.
• Прозрачность неожиданно становится чёрной/белой.
• Логотип слишком близко к краям и обрезается.
• Закэшировалась старая иконка - удалите ярлык и добавьте снова после деплоя.