Иконки Web, PWA и Chrome

Веб-ZIP содержит favicon.ico, PNG 16/32 px, иконку Apple touch 180 px, PWA-иконки 192/512 px, site.webmanifest и og.png 1200x630.

Содержимое веб-ZIP

Два PNG PWA — обычные квадратные иконки. Имена и размеры соответствуют массиву icons в site.webmanifest; og.png — отдельная картинка для публикации ссылок.

Web/
  favicon.ico
  favicon-16x16.png
  favicon-32x32.png
  apple-touch-icon.png
  android-chrome-192x192.png
  android-chrome-512x512.png
  site.webmanifest
  og.png
  README.txt

Подключение иконок к сайту

1. Скопируйте файлы Web в публичную папку и разместите в корне домена или измените пути под выбранную папку.
2. Измените name и short_name в site.webmanifest. start_url и scope относительны к манифесту; пути иконок начинаются с /. Исправьте их, если изображения находятся в подпапке.
3. Добавьте ссылки manifest, favicon и Apple touch в HTML head. Используйте HTTPS или localhost. В инструментах браузера проверьте манифест и убедитесь, что URL иконок возвращают изображения, а не резервную HTML-страницу.

<link rel="manifest" href="/site.webmanifest">
<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

{
  "name": "My App",
  "short_name": "App",
  "start_url": "./",
  "scope": "./",
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Эти иконки не подготовлены как maskable. ZIP не добавляет service worker или работу офлайн; одни иконки не гарантируют установку. Проверьте целевой браузер и устройство.

Генератор фавиконов и иконок PWA

Экспорт иконок и рекламных изображений Chrome

Загрузите изображение и выберите Chrome для PNG и прямоугольных рекламных файлов. Изображение центрируется на белом фоне; завершите дизайн перед отправкой в магазин.

• Иконки расширения: PNG 16, 32, 48 и 128 px, а также начальный файл Manifest V3.
• Иконка магазина (128x128): Отдельный PNG для страницы Chrome Web Store.
• Малая плитка (440x280): Непрозрачный PNG для малого рекламного блока.
• Marquee (1400x560): Дополнительное большое рекламное изображение, отличное от скриншота.
• Скриншоты: Снимите реальные экраны отдельно в 1280x800 или 640x400. Этот инструмент не снимает экраны и не добавляет рамки.

Генератор иконок и изображений для расширений Chrome

Официальные источники

• Web App Manifest
• Chrome Web Store