Как сделать фавикон для сайта: размеры, форматы и установка

Фавикон – маленькая иконка на вкладке браузера и в результатах Google. Разбираем, какие файлы нужны сайту в 2026 году, как сделать их из логотипа и почему иконка может не появляться в поиске.

Фавикон видят чаще, чем сам логотип: на вкладке браузера, в закладках, в истории, на главном экране телефона и рядом с названием сайта в Google. Сайт без фавикона выглядит недоделанным, а среди десятка открытых вкладок его просто не найти.

Когда-то хватало одного файла favicon.ico размером 16 × 16. Теперь устройств больше, и каждое просит свой размер. Вручную это полчаса работы в графическом редакторе, генератором – минута.

СправкаКакие размеры фавикона нужны

Последняя строка – не фавикон, но его удобно делать заодно: это картинка, которую Telegram, Viber или Facebook показывают, когда кто-то отправляет ссылку на ваш сайт.

ИнструкцияКак сделать фавикон из логотипа: 4 шага

1. Откройте генераторПерейдите в Фавикон для сайта. Регистрация не нужна.
2. Загрузите логотипЛучше всего – простой знак без мелкого текста. Подойдет PNG, JPG или SVG.
3. Выберите фонПрозрачный, белый или фирменный цвет. Все размеры создаются автоматически.
4. Скачайте архивВнутри – favicon.ico, PNG-иконки и готовый код для сайта.

ДизайнЧто поставить на фавикон

На вкладке иконка занимает 16 пикселей. В таком размере надпись из пяти букв превращается в серую полоску. Работают три варианта.

Знак из логотипа. Если в логотипе есть отдельный символ, берите его без надписи.

Первая буква названия. Жирная буква на фирменном фоне читается даже в самом маленьком размере.

Упрощенная версия. Сложный знак с тонкими линиями стоит упростить: убрать мелкие детали, утолщить линии.

Прозрачный фон выглядит аккуратно, но проверьте иконку в темной теме браузера: темный знак на темной вкладке исчезает. Если так, выберите белую или фирменную подложку.

СайтКак установить фавикон на сайт

WordPress. «Внешний вид» → «Настроить» → «Свойства сайта» → «Иконка сайта». Загрузите PNG 512 × 512 – остальные размеры система сделает сама.

Конструкторы сайтов. В настройках сайта обычно есть раздел «Фавикон» или «Иконка сайта» с полем для загрузки файла.

Собственный сайт. Положите файлы из архива в корневую папку сайта и вставьте готовый код в раздел head каждой страницы.

После установки откройте сайт в приватном окне: браузеры долго держат старую иконку в памяти, и в обычном окне вы можете видеть прежнюю.

ПоискПочему фавикон не показывается в Google

Иконка не квадратная или слишком маленькая. Google принимает квадратные иконки со стороной, кратной 48 px: 48, 96, 144 и больше.

Прошло мало времени. Поиск обновляет фавикон после очередного обхода главной страницы. Это может занять от нескольких дней до нескольких недель.

Файл закрыт от робота. Проверьте, что иконка открывается по прямому адресу и не запрещена в robots.txt.

Иконка указана только на отдельных страницах. Google берет фавикон с главной страницы сайта.

ДеталиТемная тема, SVG и цвет панели

Темная тема. Все больше людей пользуются темным оформлением браузера. Черный знак на прозрачном фоне там исчезает. Самое простое решение – цветная или белая подложка со скругленными углами.

SVG-фавикон. Современные браузеры понимают векторную иконку: она четкая в любом размере. Но Safari и старые браузеры поддерживают ее не полностью, поэтому SVG добавляют вместе с PNG и ICO, а не вместо них.

Цвет панели на Android. В коде сайта можно указать фирменный цвет – и верхняя панель браузера Chrome на телефоне окрасится в него. Мелочь, которая делает сайт похожим на приложение.

Чек-листПроверка после установки

1. Вкладка браузераОткройте сайт в Chrome, Safari и Firefox: иконка есть, и она четкая.
2. Темная темаПереключите оформление браузера на темное и посмотрите, виден ли знак.
3. Закладка на телефонеДобавьте сайт на главный экран iPhone и Android: должна появиться ваша иконка, а не скриншот страницы.
4. Прямой адресОткройте вашсайт/favicon.ico – файл должен загрузиться.
5. Превью ссылкиОтправьте себе ссылку на сайт в Telegram: появились картинка и заголовок.

ЧестноСервис уменьшает логотип. Знак для маленьких размеров рисует дизайнер

Генератор делает все нужные файлы из того логотипа, который вы загрузили. Если логотип – длинная надпись без знака, в 16 пикселях он все равно будет неразборчивым: программа не придумает для него символ.

Адаптивную версию логотипа – отдельный знак, который читается и на вкладке, и в аватарке, – мы разрабатываем вместе с логотипом: разработка логотипа.

Посмотрите на иконку в реальном размере среди других вкладок. Если ваш сайт не узнать за секунду – знак нужно упрощать.

ВопросыЧастые вопросы