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

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

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

Фавикон ассоциируется с сайтом и его содержимым. Иногда дизайнеры называют фавикон лёгким ремайндером для пользователей, которые забыли, на какой странице они находятся. Такая иконка, как и логотип, концентрирует смысл всего ресурса. Неудивительно, что логотип и фавикон у крупных брендов часто совпадают. Ещё в качестве фавикона часто используют первую букву имени бренда или ассоциирующееся с темой изображение — горы у производителя сноубордов, палатку у коммерческого турклуба, земляничину у магазина ягод и орехов «Ягодка» и т. д.

В более широком понимании фавикон — это часть веб-дизайна, которая относится к десктопным версиям сайтов.

Фавикон, цветной вариант логотипа бренда outdoor-магазина и он же в монохроме

Фавикон помогает пользователям идентифицировать сайты и быстрее их запоминать. Такие иконки поддерживают брендинг и улучшают визуальную эстетику сайта. Удачные фавиконы способствуют повышению кликабельности — их лучше видно в списке закладок, в открытом браузере среди других 20–30 страниц. Яркий и гармоничный фавикон привлекает внимание и подталкивает пользователя к посещению сайта.

Умение создавать запоминающиеся иконки — важный, но не единственный значимый навык для веб-дизайнера. Понадобится знание основ типографики и композиции, умение работать в «Фигме» и собирать лендинги на «Тильде». Этому и сопутствующим вещам учим на курсе «Веб-дизайнер». После завершения курса бесплатно поможем с поиском первой работы по новой специальности.

Фавикон всегда имеет форму квадрата. Технические требования к размеру фавикона в поисковой системе Яндекса — от 16 до 120 пикселей. В Google размеры немного другие — от 48 до 144 пикселей.

Оптимальные размеры фавиконов в разных поисковых системах:

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

Фавиконы рекомендуется создавать в векторном формате SVG, который позволяет сразу делать ресайзы под разные размеры. Но можно использовать и другие распространённые форматы:

● PNG — позволяет использовать прозрачность, хорошо поддерживается современными браузерами;
● ICO — традиционный формат, поддерживает несколько размеров;
● JPEG — главное — помнить, что картинка должна быть квадратной;
● GIF — редко, но используется.

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

Перечислим основные способы создания фавиконов.

1. Вручную в «Фигме», «Иллюстраторе», «Фотошопе» или любом другом графическом редакторе. Сделать фавикон можно как обычную картинку с учётом ограничений по размеру. Дизайнер сначала создаёт фрейм нужного размера, затем рисует в нём картинку по техническому заданию, а после экспортирует её в формате SVG, PNG или JPEG. При этом в качестве базы и основы для доработки можно использовать не только векторные, но и растровые изображения.

2. С помощью специального плагина в «Фигме» — это может быть Favicon Exporter или Favvy Favicon Exporter. Чтобы их найти, надо в поисковой строке написать Favikon. Другой вариант — скачать плагин с официального сайта Figma Community.

3. С помощью специальных сервисов по созданию фавиконов, например Favicon.io или Real Favicon Generator. Подобных вариантов на рынке множество, они отличаются интерфейсом и имеют немного разный функционал, но все в целом весьма простые в использовании.

Также можно скачать бесплатный или купить готовый фавикон на стоках и сервисах, например Flaticon, Icons8 и Freepik.

Делает фавикон из изображения в формате PNG или JPEG, текста или эмодзи.
Например, дизайнеру нужно придумать, как будет выглядеть фавикон для бренда «Ягодка», который торгует дикоросами и орехами. Достаточно указать название и выбрать цвета, сервис сам преобразует результат в иконку.

Онлайн-генератор с более широким функционалом. Чтобы получить иконку, достаточно загрузить нужное изображение. После мгновенной генерации можно посмотреть, как фавикон будет выглядеть в разных OS и в разных браузерах, в светлой и тёмной темах. Также есть возможность глубже проработать дизайн фавикона: добавить фон и поля, изменить яркость.

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