Фавикон: что это, зачем нужен, как сделать

Что такое фавикон для сайта

Фавикон (favicon) — это иконка, которая отображается:

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

• 

Так выглядит фавикон Точка Банка во вкладке браузера

Здесь фавикон Точка Банка расположен в результатах поиска перед названием страницы, ссылкой и сниппетом сайта

Название favicon произошло от сочетания английских слов favorite («избранное») и icon («иконка»). Впервые такие значки появились в 1999 году — их внедрили в браузер Internet Explorer 5, чтобы пользователи могли быстро находить любимые сайты в закладках. Вместо безликих иконок в списке «Избранного» стали отображаться мини-логотипы сайтов.

С тех пор фавикон стал неотъемлемой частью любого сайта. Откройте сейчас 10 вкладок в браузере: даже не читая названий, вы узнаете Gmail — по разноцветной букве «M», а Точка Банк — по белой «Т» на фиолетовом фоне. Без фавикона сайт теряет 30% узнаваемости: вместо логотипа вкладка отображает стандартный значок, сливаясь с конкурентами.

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

Зачем нужен фавикон

Вкладка без фавикона — как человек без аватарки в мессенджере: всё работает, но узнаваемость меньше. 

Вот, что даёт фавикон компании:

• Узнаваемость. Значок помогает пользователю быстрее найти вкладку или закладку с сайтом среди множества открытых страниц.
• Профессиональный вид. Без фавиконки сайт выглядит незавершённым. К примеру, у небольшого интернет-магазина без фавикона вкладки смотрятся простовато по сравнению с сайтом, где есть аккуратный логотип в виде иконки.
• Продвижение в поиске. В некоторых случаях favicon появляется в поисковом сниппете — небольшом описании сайта в результатах поиска. Это может повысить кликабельность. Например, при поиске по бренду рядом с названием часто показывается логотип. Сайт становится более заметным и привлекательным.

Фавикон — проявление заботы о пользователе. Сайт создаётся для посетителей. Аккуратная и узнаваемая иконка показывает, что компания стремится сделать опыт каждого пользователя максимально удобным и приятным.

Размеры и форматы фавикона

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

Классический размер — 16×16 пикселей. Именно такой фавикон отображается во вкладке браузера. Но современные сайты часто используют сразу несколько иконок разных размеров, чтобы корректно отображаться на всех устройствах и платформах: от десктопов до смартфонов.

Вот базовый набор размеров:
16×16 — для вкладки браузера и панели закладок;
32×32 — для отображения в меню быстрого доступа;
48×48 и выше — для некоторых расширений и приложений;
96×96, 128×128, 144×144 — для Android и поисковой выдачи Google.

Что касается форматов файлов, то лучше всего использовать:

• .ico — классический формат, поддерживается всеми браузерами;
• .png — современный и лёгкий, поддерживает прозрачность;
• .svg — идеален для масштабирования, но не всегда корректно отображается в старых браузерах.

Где создавать фавикон

Есть множество сервисов, где можно быстро и бесплатно сделать favicon для сайта:

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

• 

Процесс создания фавикона в сервисе Favicon.io

• Real Favicon Generator — мощный инструмент для создания фавиконов, который генерирует файлы для всех платформ и устройств.

Интерфейс генератора фавиконов Real Favicon Generator

Как сделать фавикон для сайта

Если вы уверенный пользователь, фавикон можно сделать самостоятельно в Photoshop или Figma.

1. Создайте квадратное изображение — желательно минималистичное. Изображение должно быть узнаваемым даже в 16 пикселях.
2. Сохраните файл в формате .ico, .png или .svg.
3. Проверьте, как фавикон будет выглядеть на разных фонах — белом, чёрном, сером.
4. Протестируйте отображение в разных браузерах: Chrome, Safari, Firefox, Edge.
5. Убедитесь, что изображение не теряет читаемость при уменьшении.

Если нет времени, воспользуйтесь описанными в предыдущем разделе онлайн-сервисами, которые помогут создать фавикон в пару кликов.

Как добавить фавикон на сайт

Добавление фавикона — процесс несложный. 

Вот инструкция:

1. Загрузите фавикон на сервер

Разместите файл в корне сайта (например: /favicon.ico) или в отдельной папке, если используете другой формат.

2. Пропишите фавикон в HTML

Вставьте в <head> следующий тег:

<link rel="icon" href="/favicon.ico" type="image/x-icon">

Для форматов PNG, SVG и других добавьте дополнительные строки:

<link rel="icon" type="image/png" href="/favicon.png">

<link rel="icon" type="image/svg+xml" href="/favicon.svg">

3. Очистите кэш и проверьте

После загрузки фавикона обновите страницу, очистите кэш браузера и убедитесь, что всё работает как надо.

Лайфхак: добавьте несколько размеров фавикона и пропишите их в <head> — так будет обеспечено корректное отображение в закладках, на главном экране телефона и в поиске.

Примеры фавиконов

Хороший фавикон должен быть простым, узнаваемым и соответствовать бренду.

Вот несколько удачных фавиконов известных компаний:

• ВКонтакте — простая аббревиатура VK в фирменных цветах. Минимум деталей, максимум узнаваемости. Отлично смотрится в любом размере и не теряется даже при скроллинге между вкладками.
• Яндекс — белая буква Я на красном фоне. Он мгновенно ассоциируется с брендом Яндекса.
• Ozon — белая буква O на сине-розовом фоне. Выглядит стильно, не перегружено. Даже в маленьком размере легко читается и остаётся заметной на фоне других вкладок. 
   

На вкладках открытых страниц в браузере представлены узнаваемые фавиконы трёх популярных ресурсов: ВКонтакте, Яндекс и OZON

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

Плохой пример: фавикон в виде сложной картинки с множеством деталей — на 16 пикселях будет выглядеть как клякса.

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