Гайд по safe-area maskable
Узнайте, как избежать обрезки на launcher-экранах.
Как подключить favicon и иконки PWA на сайте
Создайте и распакуйте набор иконок, добавьте ссылки в HTML и проверьте пути к изображениям в веб-манифесте.
Рекомендуемый вход
- PNG или SVG, желательно квадрат и размер не меньше 512×512.
- Для логотипов с гибким размещением лучше использовать прозрачный фон.
- Если исходник не квадратный, инструмент автоматически дополняет холст и центрирует объект.
Практический сценарий
- Загрузите источник и проверьте, что границы объекта определены корректно.
- Выберите режим Balanced или Safe и просмотрите favicon/PWA preview.
- Перед экспортом проверьте имя manifest, фон и theme color.
- Скачайте ZIP с favicon.ico, 16/32/48, Apple 180 и PWA 192/512.
Полный пример
Вход: Прозрачный брендовый SVG 1024×1024.
Настройки: Сбалансированные отступы и прозрачный фон.
Выход: Готовый набор иконок для сайта и PWA без ручной подготовки размеров.
Советы перед публикацией
- Используйте простой исходный знак, чтобы favicon 16×16 и 32×32 оставался узнаваемым.
- Храните один финальный ZIP с manifest и иконками, которые ушли в production.
- После деплоя проверьте favicon и PWA-иконки в реальном браузере.
Как использовать скачанный набор
В ZIP входят 10 иконок PNG, favicon.ico и site.webmanifest. Это ресурсы для сайта и PWA, а не готовый проект нативного приложения.
Файлы в ZIP
favicon-16x16.pngfavicon-32x32.pngfavicon-48x48.pngapple-touch-icon.pngicon-192x192.pngicon-512x512.pngicon-maskable-192x192.pngicon-maskable-512x512.pngicon-256x256.pngicon-1024x1024.pngfavicon.icosite.webmanifest
- Распакуйте ZIP и загрузите файлы на сайт. В примере все файлы размещаются в корне сайта.
- Добавьте следующие ссылки в раздел head HTML-страниц.
- Перед экспортом задайте название, цвета и стартовый адрес. Поместите site.webmanifest рядом с четырьмя PNG-иконками PWA, на которые он ссылается: пути отсчитываются от манифеста.
- Откройте адреса иконок и манифеста, проверьте загрузку и вид на нужных устройствах. Одних иконок недостаточно для настройки устанавливаемого PWA.
<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Для подпапки, например /icons/, измените ссылки HTML и оставьте манифест рядом с PNG. Укажите реальный адрес входа в приложение в start_url. Исходный SVG в ZIP не входит.
Частые вопросы
Можно ли использовать один источник для favicon и PWA?
Да, если исходник качественный и отступы настроены корректно.
Почему маленький favicon выглядит размытым?
На маленьких размерах важна простая форма; уменьшите детализацию и увеличьте safe margin.
Нужно ли вручную готовить каждый размер?
Нет, инструмент автоматически экспортирует основные размеры.
Связанные сценарии иконок
Гайд SVG в пакет
Пошаговый сценарий экспорта полного набора из SVG.
Связанные инструменты
Форматирование JSON
Проверяйте и форматируйте manifest JSON перед релизом.
Инструмент QR-кодов
Создавайте QR-ссылки для страниц, где используются новые favicon/PWA assets.
Инструмент Base64
Проверяйте или конвертируйте изображения при отладке встроенных иконок.