Создать иконку для PWA

Что такое PWA-иконка

PWA (Progressive Web App) — это технология, которая позволяет сайту вести себя как приложение: работать офлайн, отправлять уведомления и иметь свою иконку на домашнем экране. Для этого нужны иконки 192×192 и 512×512 пикселей.

Как создать

1. Загрузите изображение — логотип или иконку вашего приложения.
2. Нажмите «Создать favicon» — получите оба размера.
3. Скачайте PNG 192×192 и 512×512.

Как использовать в manifest.json

Добавьте в файл manifest.json вашего сайта:

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

Что важно знать

• 192×192 — иконка на домашнем экране Android и в меню приложений.
• 512×512 — для экранов высокого разрешения и PWA-магазинов.
• Фон должен быть сплошным — прозрачные участки могут отображаться некорректно.
• Для закруглённых иконок на Android используйте "purpose": "maskable".

Полный набор для PWA

• favicon.ico — 16×16, 32×32, 48×48.
• apple-touch-icon.png — 180×180.
• icon-192.png — 192×192.
• icon-512.png — 512×512.