Главное о фавиконах: зачем нужны и как делать

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

Фавикон (favicon, сокращение от «favorites icon») — это миниатюрная графическая иконка, сопровождающая название веб-сайта в разных элементах интерфейса:

• во вкладках веб-браузеров;
• среди сохраненных закладок пользователя;
• в списке посещенных страниц и истории браузера;
• в результатах, выдаваемых поисковыми системами;
• на десктопе компьютера при создании пользователем ярлыка веб-ресурса;
• в перечне приложений смартфонов и планшетов (когда пользователь добавляет сайт на начальный экран устройства).

Фавиконы впервые появились в Internet Explorer в конце 1990-х гг. Как раз тогда браузеры начали поддерживать возможность добавления favicon для лучшего восприятия сайта. Кстати, тогда фавиконы отображались только в закладках (favorites, отсюда и название).

Сейчас фавикон — стандарт для всех современных браузеров и важный элемент идентификации сайта.

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

Влияет на узнаваемость бренда. Представьте, что у пользователя открыто 15 вкладок в браузере (а то и все 30). Фавикон помогает быстро найти нужную вкладку в море других. Это особенно важно, когда названия вкладок сокращаются из-за их количества, и виден только фавикон.

Вызывает доверие. Сайт без фавикона выглядит недоделанным, как будто его сверстал новичок, который забыл о важных деталях. А сайту, сделанному на конструкторе (например, на Тильде), автоматически присваивается фавикон самого конструктора. Это лишает сайт индивидуальности. Уникальный фавикон, особенно если он правильно оформлен и соответствует фирменному стилю, вызывает больше доверия к сайту. А доверие – один из факторов конверсии.

Увеличивает кликабельность. В поисковой выдаче Яндекса и Google сайты с фавиконами привлекают внимание пользователей.

Улучшает пользовательский опыт. Фавикон помогает пользователям быстрее ориентироваться не только в открытых вкладках, но и в закладках и истории посещений. Это маленькое улучшение UX не потребует больших затрат, но принесет пользу посетителям сайта.

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

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

Размер. Стандартный размер — 16×16 пикселей. Но лучше подготовить несколько версий разного размера (32×32, 48×48, 64×64 и т. д.) для разных устройств и ситуаций.

Формат. Классический формат файла для фавикона — .ico, но современные браузеры также поддерживают .png, .gif и .svg.

Дизайн. Простота — основное условие успеха. Избегайте мелких деталей, которые все равно не разглядишь на маленькой иконке. Лучше использовать один-два основных цвета и четкие формы.

Что можно использовать в качестве фавикона:

• логотип компании (возможно, упрощенный вариант);
• первую букву названия сайта в фирменных цветах;
• знак или символ, ассоциирующийся с вашим брендом;
• иконку, отражающую тематику сайта, если у вас еще нет узнаваемого бренда.

Как сделать фавикон в графическом редакторе.

1. Создайте квадратное изображение (желательно 512×512 пикселей — чтобы потом масштабировать) в любом графическом редакторе.
2. Разместите ваш логотип или другой символ так, чтобы он хорошо читался.
3. Убедитесь, что изображение хорошо смотрится при уменьшении до 16×16 пикселей.
4. Сохраните в нужном формате (.ico или .png).

Отсутствие опыта работы в графических программах — не проблема. Для создания фавиконов есть удобные онлайн-генераторы.

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

1. Favicon.io
Один из самых простых и удобных генераторов. Вот из чего он позволяет сделать фавикон:

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

Сервис автоматически генерирует все нужные форматы и размеры.

2. RealFaviconGenerator
Более продвинутый вариант. Создает полный комплект фавиконов для всех платформ и браузеров, включая Windows, iOS, macOS и Android. Также генерирует готовый HTML-код для размещения на сайте.

3. Favicomatic.com
Это сервис, который позволяет быстро создать фавиконы нужных размеров. Например, можно сгенерировать стандартные значки размером 16×16 и 32×32 пикселя или выбрать дополнительные форматы иконок, подходящие для различных популярных операционных систем. Полученные файлы можно сразу сохранить на свой Google Диск.

4. Figma или Adobe XD
Если эти графические редакторы уже в вашем рабочем арсенале, вы можете разработать фавикон прямо там и сохранить его в PNG или SVG формате.

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

1. Классический способ.
Самый простой способ — разместить файл favicon. ico в корневой директории сайта. Большинство браузеров автоматически ищут фавикон по пути /favicon.ico.

2. Использование HTML-тегов.
Более гибкий подход — использовать специальные метатеги в разделе <head> вашего HTML-документа:

<!-- Базовый фавикон -->
<link rel="icon" href="/favicon.ico" sizes="16×16">
<link rel="icon" href="/favicon-32.png" sizes="32×32">

<!-- Для iOS устройств -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- Для Android -->
<link rel="manifest" href="/manifest.json">

<!-- Для Windows -->
<meta name="msapplication-TileImage" content="/mstile-144×144.png">
<meta name="msapplication-TileColor" content="#2b5797">

3. Для WordPress и других CMS
Если вы используете WordPress или другую CMS, процесс еще проще.

• WordPress. В панели администратора перейдите в «Внешний вид» > «Настройка» > «Идентичность сайта» и загрузите изображение логотипа.
• Joomla. Используйте администраторскую панель или отредактируйте шаблон.
• Битрикс. Загрузите фавикон через административную панель в настройках сайта.
• Tilda. Загрузите изображение в разделе «Настройки сайта» > «Логотип и фавикон».

Чтобы фавикон корректно отображался в поисковой выдаче, нужно учитывать требования поисковых систем.

1. Размер и формат: Яндекс рекомендует использовать фавиконы размером от 32×32 до 120×120 пикселей, при этом оптимальным считается 120×120 пикселей (в формате PNG или SVG), а минимальный — 32×32 пикселей (в ICO). В общем, если хотите выглядеть в поиске Яндекса красиво, отдайте предпочтение PNG или SVG с хорошим качеством графики.
2. Расположение: стандартное расположение в корне сайта или указание через HTML-теги.
3. Уникальность: желательно, чтобы фавикон был уникальным и соответствовал тематике сайта.

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

На что обратить внимание дизайнерам?

• Используйте четкие, простые и узнаваемые элементы бренда.
• Проверяйте, как фавикон отображается на светлом и темном фоне.
• Отдавайте предпочтение прозрачному фону (особенно в PNG-формате).
• Сохраняйте квадратные пропорции и корректное разрешение.

Проблемы с отображением фавикона — распространенное явление. Вот несколько советов, как их решить.

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

• обновить страницу с помощью Ctrl+F5 (Windows) или Cmd+Shift+R (Mac);
• очистить кеш браузера;
• проверить отображение в режиме инкогнито.

2. Проверьте пути и теги. Убедитесь, что:

• путь к фавикону в HTML-коде указан правильно;
• файл действительно находится в указанном месте на сервере;
• нет опечаток в имени файла или расширении.

3. Проверьте формат и размер. Некоторые браузеры лучше работают с определенными форматами. Если .ico не работает, попробуйте .png или наоборот.

4. Используйте валидаторы. Есть специальные сервисы, которые проверяют правильность настройки фавикона, например, Favicon Checker.

Фавикон — это небольшая, но важная деталь. Он как цифровая визитка сайта, первое впечатление в мире закладок. Создать и добавить фавикон не займет много времени и ресурсов, но может принести ощутимую пользу.