Как пользоваться
- Выберите «Буквы» и введите один или два символа, задав их цвета, либо выберите «Изображение» и загрузите логотип (желательно квадратный, размером не менее 512 px).
- Проверьте предварительный просмотр значков каждого размера, особенно 16 и 32 px — они отображаются во вкладках браузера.
- Скачайте ZIP-архив и загрузите его файлы в корневую папку сайта.
- Вставьте теги HTML в раздел head страниц и при необходимости измените название в site.webmanifest.
Как это работает
Браузеры и устройства ищут значки в разных местах. Создаваемый здесь набор охватывает распространённые случаи: favicon.ico с изображениями размером 16, 32 и 48 px для вкладок браузера, закладок и старых программ, которые автоматически запрашивают /favicon.ico; PNG-файлы размером 16 и 32 px, указанные в тегах link; apple-touch-icon размером 180 × 180, который используется, когда пользователь добавляет сайт на главный экран iPhone или iPad; а также значки размером 192 и 512 px, указанные в site.webmanifest для главных экранов Android и устанавливаемых веб-приложений.
В файле favicon.ico изображения хранятся в формате PNG внутри контейнера ICO, который поддерживается всеми современными браузерами и Windows Vista и более поздними версиями. Файлы ICO и ZIP создаются кодом на этой странице; данные не отправляются на сервер.
Для значков небольшого размера нужен простой дизайн: при размере 16 × 16 пикселей тонкие линии и мелкий текст исчезают, поэтому жирная буква или упрощённый знак логотипа подходят лучше, чем полный логотип с надписью. Изображение уменьшается в несколько этапов с высоким качеством. Для apple-touch-icon всегда задаётся сплошной цвет фона, поскольку iOS заполняет прозрачные области чёрным цветом, а скругляет углы самостоятельно.
После загрузки новых значков браузеры могут некоторое время показывать старый фавикон, потому что активно кэшируют его. Обычно помогает принудительное обновление страницы или прямое открытие /favicon.ico.
Примеры
Буквенный значок для нового проекта
Наберите «TG» белыми буквами на тёмно-зелёном скруглённом квадрате — получится простой значок, который хорошо виден во вкладке браузера даже при размере 16 × 16 px. Готовый логотип не нужен.
Значок из готового логотипа
PNG-логотип размером 1024 × 1024 с прозрачным фоном и параметром «Вписать целиком» создаст прозрачные значки для вкладок и apple-touch-icon на фоне цвета вашего бренда.
Широкий логотип
Для текстового логотипа размером 1200 × 300 параметр «Обрезать по центру» оставит только буквы посередине. При параметре «Вписать целиком» сохранится всё изображение, но оно станет очень маленьким; обычно лучше использовать отдельный квадратный знак логотипа.
Часто задаваемые вопросы
Нужен ли мне favicon.ico?
Да, он по-прежнему полезен. Некоторые браузеры, программы для чтения лент и другие инструменты запрашивают /favicon.ico в корневой папке сайта, даже если тег link отсутствует. Современные браузеры также используют PNG-значки, указанные в HTML.
Куда загрузить файлы?
Загрузите файлы в корневую папку сайта, рядом с главной страницей, чтобы /favicon.ico и остальные пути в HTML работали. Если вы используете подпапку, измените пути в тегах link и в site.webmanifest.
Почему по-прежнему отображается старый фавикон?
Браузеры кэшируют фавиконы отдельно и надолго. Попробуйте принудительно обновить страницу, открыть /favicon.ico в новой вкладке или проверить в приватном окне. Переименование файлов, например в favicon-v2.ico, также принудительно обновит их.
Можно ли создать фавикон в SVG?
Нет. Инструмент создаёт файлы PNG и ICO, которые работают везде. Если у вас уже есть логотип в SVG, можете добавить его самостоятельно с помощью тега link с типом image/svg+xml в дополнение к этим файлам.
Конфиденциальность
Значки, файл ICO и ZIP-архив создаются в браузере. Изображения и текст не загружаются на сервер, не сохраняются и не включаются в аналитику.