Что умеет инструмент
Генератор favicon создает набор PNG-иконок, favicon.ico, site.webmanifest и HTML-фрагмент для подключения. Можно выбрать фон, отступ и способ кадрирования.
Как использовать
- Загрузите квадратный или близкий к квадрату логотип.
- Настройте фон, отступ, кадрирование и название приложения.
- Скачайте ZIP и положите файлы в корень сайта.
Что входит в пакет favicon
ZIP содержит favicon.ico для классических браузеров, PNG-иконки 16, 32, 48, 180, 192 и 512 пикселей, файл site.webmanifest и HTML-фрагмент для подключения. Такой набор покрывает вкладки браузера, закладки, iOS-иконку и Android/PWA-иконки.
favicon.ico собирается из нескольких PNG-размеров, чтобы старые и новые браузеры могли выбрать подходящую версию. PNG 180x180 используется как apple-touch-icon, а 192 и 512 пикселей прописываются в manifest для установки сайта на экран устройства.
Как подготовить исходный логотип
Лучше всего подходит квадратный или почти квадратный логотип с достаточным отступом вокруг знака. Если знак вытянутый, используйте фон и padding, чтобы он не прижимался к краям маленьких иконок.
Прозрачный фон хорош для простых знаков, но на некоторых платформах иконка может выглядеть непредсказуемо. Если нужен стабильный вид, задайте цвет фона и проверьте превью в 192, 48 и 32 пикселя перед скачиванием.
Как установить файлы на сайт
Обычно файлы из ZIP кладут в корень сайта, рядом с /favicon.ico, а HTML-фрагмент добавляют в head шаблона. Если сайт собирается фреймворком, поместите файлы в публичную директорию, которая копируется без изменения имен.
После замены favicon браузеры и поисковые системы могут показывать старую иконку из кеша. Проверьте страницу в приватном окне, обновите кеш и дождитесь повторного обхода, если иконка уже была опубликована.