HTML-сниппет для подключения фавиконок
Главная причина, почему фавиконка «не работает» — неверное подключение или кэш. Самое надёжное решение: использовать готовый сниппет из ZIP-архива.
Куда вставлять
- Вставляйте теги в <head> на всех страницах сайта (или в общий шаблон).
- Файлы из ZIP положите в корень или в папку /icons/ — главное, чтобы пути в сниппете совпадали.
Какие типы файлов обычно нужны
- favicon.svg — основной вариант для современных браузеров
- favicon.ico — совместимость (старые сценарии/браузеры)
- apple-touch-icon*.png — для iOS (иконка на домашнем экране)
- manifest.json + android-chrome*.png — для Android/PWA
Про кэш
После замены фавиконки очищайте кеш браузера или меняйте имя файла/путь. Иногда нужно обновить страницу «жёстко».
Сгенерировать ZIP и получить готовый сниппет
Сниппет уже будет внутри архива.
FAQ
Можно ли подключить только один файл?
Можно, но лучше подключать набор: SVG + ICO + PNG. Это повышает совместимость и качество отображения.
Нужно ли менять пути в коде?
Только если вы переносите файлы в другую папку. Важно, чтобы пути в <link> совпадали с реальным расположением файлов.
Почему фавиконка в поиске не обновляется?
Поисковые системы обновляют иконку с задержкой. Плюс они могут кэшировать. Проверьте, что на сайте реально отдаётся корректная иконка и нет ошибок 404.