Технические

Что такое favicon и зачем он нужен вашему сайту?

Крошечный значок на вкладке браузера часто оказывается первым, что замечает посетитель, — и первым, что выдаёт незаконченный сайт.

Что это

Favicon (сокращение от «favorite icon», «значок избранного») — это маленькое квадратное изображение, которое отображается рядом с заголовком страницы на вкладке браузера, в списке закладок, а иногда в истории браузера и поисковых подсказках. Обычно это упрощённая версия логотипа — достаточно простая, чтобы её можно было узнать на размере в несколько пикселей, например буква, простая форма или значок.

Без него браузеры показывают вместо него обычный значок-заглушку с пустой страницей — тот же самый placeholder, который используется для любого сайта, не задавшего свой значок, из-за чего сразу становится очевидно, что эта конкретная деталь так и не была настроена.

Почему это важно

Отсутствующий favicon — мелочь, но при этом одна из самых заметных мелочей: он появляется на каждой странице вашего сайта, в каждой вкладке браузера, у каждого посетителя, постоянно. Когда у человека открыто несколько вкладок, favicon часто оказывается единственным визуальным способом снова найти именно вашу вкладку в ряду других — стандартный пустой значок усложняет эту задачу и незаметно сигнализирует: «этот сайт так и не был доделан до конца».

Это также одна из самых быстрых побед во всём этом списке: в отличие от решений по контенту или дизайну, создание и добавление favicon занимает считаные минуты и не требует дальнейшего обслуживания после установки.

Как это исправить

  1. Создайте простое квадратное изображение (в идеале — упрощённую версию вашего логотипа) — бесплатные генераторы favicon могут автоматически преобразовать существующий логотип в нужные форматы и размеры файлов.
  2. Сохраните результат как favicon.ico или favicon.svg и загрузите его в корневую папку вашего сайта (или туда, где ваша хостинг-платформа ожидает файлы значков).
  3. Добавьте <link rel="icon" href="/favicon.ico"> (или аналог для SVG) внутри раздела <head> вашей страницы.
  4. Если вы используете конструктор сайтов (Squarespace, Wix, Webflow, WordPress), ищите поле для загрузки «favicon» или «значок сайта» в общих настройках сайта, а не редактируйте код напрямую.
  5. Перезагрузите страницу в новой вкладке браузера (или очистите кэш браузера), чтобы убедиться, что новый значок появился, — favicon иногда кэшируются и обновляются с задержкой.

Проверьте, есть ли эта проблема на вашем сайте

Launch Readiness проверяет ваш сайт на эту и ещё ~50 проблем перед запуском за несколько секунд — бесплатно, без регистрации.

Запустить бесплатную проверку