Что такое фавикон и почему он нужен вашему сайту

Привет! Я Марко Очоа, Product Marketing Manager в Т‑Реклама. Мы публикуем серию статей, которая поможет сориентироваться в терминах, подходах и темах на стыке технологий и маркетинга. Сегодня поговорим о том, что такое фавикон.

Фавикон, или favicon сайта — это иконка, которая отображается, например, на вкладке браузера. Когда предприниматели занимаются созданием своего сайта, обычно обсуждаются вещи покрупнее: дизайн, скорость загрузки или SEO‑оптимизация. Про фавикон могут вспомнить в последний момент или вообще уже после того, как сайт опубликован.

Но на самом деле такие мелочи, как фавикон, важны в сценариях, когда пользователь принимает решения за доли секунды — к примеру, видит тридцать своих открытых вкладок и пытается вспомнить, где же был нужный сайт. Если не вспомнит, может заново пойти в поиск и обратить внимание на кого‑то другого.

Разберём, что такое фавикон с точки зрения бизнеса, как он влияет на метрики и почему, если фавикона нет, это воспринимается как недоработка продукта.

Как фавикон влияет на восприятие сайта

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

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

В целом, мы сейчас настолько привыкли к фавиконам у крупных компаний, что сайт без него можем воспринимать как «ненастоящий». Если фавикона нет, браузер показывает стандартную пустую пиктограмму. Пользователь может не сформулировать это словами, но интерфейс выглядит незавершенным и может вызывать меньше доверия.

На какие бизнес‑метрики может повлиять фавикон

Мы не можем посчитать, как именно фавикон увеличивает конверсию. Но он влияет на промежуточные метрики, которые в итоге формируют поведение пользователя.

Кликабельность в поиске. Представим, что пользователь ищет CRM‑систему и видит пять похожих результатов. Заголовки похожи, описания похожи. Но если у одного из сайтов в выдаче отображается узнаваемый значок, вероятность клика будет выше.

И если фавикона вообще нет, а рядом с доменами конкурентов стоят узнаваемые знаки, пустое место выглядит слабее.

Возврат на сайт через вкладки и закладки. Как я говорил выше, если фавикон легко узнаётся, сайт проще найти среди десятков вкладок.

Узнаваемость бренда. Фавикон отображается у каждого пользователя во вкладках, истории, в закладках — это огромное количество взаимодействий с элементом бренда.

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

Как сделать хороший фавикон

Здесь нужно учесть и дизайнерскую, и техническую сторону.

Фавикон — не просто уменьшенный логотип. Не все логотипы можно просто уменьшить, чтобы они хорошо смотрелись в виде иконки. Логотип может быть сложным, с плавными линиями или текстом. А фавикон должен быть четким и более лаконичным. В каком‑то смысле это концентрат логотипа.

Некоторые бренды используют для фавикона отдельный символ из логотипа или первую букву названия на цветах бренда.

Или у компании происходит ребрендинг, меняется дизайн сайта, а про фавикон забывают.

Нужно несколько размеров. В интернете до сих пор можно встретить рекомендацию сделать один файл favicon.ico размером 16×16 пикселей и добавить его в админке сайта. Это устаревший подход.

Сейчас браузеры и устройства используют несколько вариантов иконок:

• 16×16 — классическая вкладка браузера;
• 32×32 — вкладки и некоторые десктопные интерфейсы;
• 48×48 — системные интерфейсы Windows;
• 180×180 — иконка для iPhone;
• 192×192 — Android и PWA;
• 512×512 — веб‑приложения.

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

Предусмотрите вариант для темной темы. Черный фавикон на прозрачном фоне в темной теме может просто «исчезнуть», поэтому при разработке фавикона дизайнеры обычно тестируют его в двух режимах — светлом и темном, и иногда делают альтернативную версию с более контрастной подложкой.

Как проверить фавикон в разных сценариях

После добавления иконки важно проверить, как она будет отображаться для пользователей:

1. Откройте сайт в новой вкладке и посмотрите, появилась ли иконка.
2. Откройте несколько вкладок и убедитесь, что фавикон не теряется среди них.
3. Добавьте страницу в закладки и проверьте, как отображается иконка.
4. Посмотрите, как сайт отображается на смартфоне.
5. Проверьте отображение в тёмной теме.

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

Главное, что нужно запомнить про фавиконы

Что важно на практике:

1. В первую очередь, чтобы фавикон у сайта вообще был. Иногда про него могут вспомнить уже после публикации, и сайт какое‑то время висит с ощущением недоработанности.
2. Без фавикона найти сайт в череде из десятков открытых вкладок очень сложно.
3. Фавикон — это не уменьшенный логотип, а отдельный элемент дизайна, более лаконичный. Например, в нем может быть только первая буква основного логотипа.
4. При этом по фавикону все равно легко должна считываться связь с брендом. Если в погоне за краткостью уйти в абстракцию и поставить на фавикон условный желтый треугольник, узнаваемости бренду это не принесет.
5. Нужно предусмотреть разные размеры фавикона и варианты для светлой и темной темы.
6. После добавления фавикона нужно самим проверить его в разных сценариях и удостовериться, что он выглядит именно так, как вы хотели.
7. С точки зрения бизнесовых метрик, фавикон напрямую не влияет на конверсию, но косвенно влияет на узнаваемость, возвраты посетителей на сайт и даже на кликабельность в поисковой выдаче.