Подготовьте компактный знак
Используйте изображение с отчётливым силуэтом. Длинная надпись на маленькой иконке превращается в несколько нечитаемых точек. Проверьте знак на светлом и тёмном фоне; прозрачные области должны оставаться прозрачными.
Если оригинал существует только в SVG, сначала создайте растровую версию достаточного размера. Квадратное кадрирование помогает управлять видимой областью.
Соберите комплект файлов
Генератор подготавливает несколько размеров и упаковывает файлы в ZIP. ICO может содержать несколько вариантов внутри одного файла. PNG используются в разных поверхностях сайта и мобильных устройств.
Для маскируемой иконки проверьте круг и скруглённый квадрат. Важная часть рисунка должна помещаться в безопасную область, чтобы маска не отрезала знак.
Большой квадратный PNG
ICO + PNG + Apple/PWA-иконки + пример подключения
Проверьте содержимое архива и названия файлов перед добавлением на сайт.
Подключите файлы средствами сайта
В Tilda или WordPress используйте настройки иконки сайта либо инструкцию вашей темы. HTML и manifest из архива помогают при ручном подключении: пути в них нужно согласовать с фактическими адресами файлов.
- Распакуйте скачанный архив.
- Загрузите нужные иконки на сайт.
- Укажите корректные URL в настройках или HTML.
- Проверьте вкладку и мобильный вид после обновления.
Проверьте доступность иконки
Иконка и главная страница должны быть доступны для обхода Google, а URL иконки — стабильным. Обновление favicon в поиске происходит после обработки страницы; готовый ZIP сам по себе не подтверждает появление значка в выдаче.
Manifest и иконки — только часть подготовки PWA. Генератор файлов не превращает обычный сайт в полностью проверенное приложение.
Официальные требования: Google: favicon в поиске · Web.dev: manifest PWA
Вопросы и ответы
Можно ли использовать логотип с длинной надписью?
Можно, но текст часто теряет читаемость в маленьком размере. Для favicon лучше проверить простой узнаваемый знак.
Зачем нужны ICO и PNG одновременно?
Разные браузерные и мобильные поверхности используют разные файлы. Комплект позволяет выбрать нужные варианты подключения.
Почему маска обрезает рисунок?
Важные детали находятся слишком близко к краям. Уменьшите знак внутри квадратного изображения и снова проверьте маски.
Можно ли вставить пример HTML без изменений?
Сначала согласуйте пути из примера с адресами загруженных файлов. Несуществующий URL не подключит иконку.
Когда новая иконка появится в Google?
Это зависит от повторного обхода и обработки сайта. Создание или загрузка файлов не задаёт точный срок появления.
Делает ли архив сайт готовым PWA?
Нет. Manifest и иконки нужно подключить и проверить вместе с остальными возможностями приложения.