Фавикон — это небольшая иконка, которая представляет ваш веб-сайт во вкладках браузера. Для прогрессивных веб-приложений (PWA) вам также нужен веб-манифест и более крупные иконки для мобильных домашних экранов.
Подключите файлы favicon и иконок PWA
Веб-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 в публичную папку и разместите в корне домена или измените пути под выбранную папку.
- Измените name и short_name в site.webmanifest. start_url и scope относительны к манифесту; пути иконок начинаются с /. Исправьте их, если изображения находятся в подпапке.
- Добавьте ссылки 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">Эти иконки не подготовлены как maskable. ZIP не добавляет service worker или работу офлайн; одни иконки не гарантируют установку. Проверьте целевой браузер и устройство.
Читать руководство по интеграции Web, PWA и Chrome