Что такое favicon?
Подробный гид: что такое favicon, зачем он нужен и как помогает бренду и удобству сайта. Как сделать значок для своего проекта.
Определение favicon
Favicon (от favorite icon — «иконка избранного») — маленький значок, который обозначает сайт или страницу. Он встречается в браузерах и на устройствах: чаще всего во вкладке рядом с заголовком, в закладках, в истории и на домашнем экране телефона, если сайт сохранили как ярлык.
Обычно это квадратное изображение 16x16, 32x32 или 48x48 пикселей. Современные схемы допускают и более крупные варианты — до 512x512 пикселей для экранов высокой плотности и мобильных устройств.
Где появляется favicon
Значок показывается в нескольких местах, чтобы сайт было проще узнать и открыть:
- Вкладки браузера: Самое заметное место: рядом с заголовком во вкладке браузера
- Закладки: Рядом с названием в списке закладок
- История браузера: В меню истории браузера
- Адресная строка: Некоторые браузеры показывают его в адресной строке
- Домашний экран: Если сайт добавлен на домашний экран, favicon становится иконкой приложения
- Результаты поиска: Некоторые поисковики ставят его рядом с результатами
Пример: favicon во вкладках и закладках
Зачем нужен favicon
Значок влияет и на бренд, и на то, как пользуются сайтом:
Узнаваемость бренда
Удачный favicon помогает быстро найти ваш сайт среди открытых вкладок. Он закрепляет образ бренда и делает сайт заметнее.
Профессиональный вид
Свой значок выглядит законченно. Без него браузер рисует стандартную иконку — сайт кажется недоделанным.
Удобство
По значку проще найти сайт в закладках, истории и среди вкладок. Это особенно важно для тех, кто заходит часто.
Мобильный опыт
На телефоне favicon становится иконкой, когда сайт добавляют на домашний экран. Понятный значок улучшает впечатление на мобильных.
Форматы и размеры favicon
Современному сайту стоит отдать несколько форматов и размеров, чтобы значок работал во всех браузерах и на всех устройствах:
Формат ICO
Классический файл favicon.ico, обычно 16x16 или 32x32 пикселей. Самый универсальный вариант: его понимают все браузеры.
Формат PNG
PNG часто используют в размерах 16x16, 32x32, 48x48, 96x96, 180x180, 192x192 и 512x512 пикселей. Качество и прозрачность лучше, чем у ICO.
Формат SVG
SVG (Scalable Vector Graphics) не зависит от разрешения и остаётся чётким при любом масштабе. Современные браузеры его поддерживают — удобно для экранов высокой плотности.
Apple Touch Icon
Устройства Apple берут apple-touch-icon.png, обычно 180x180 пикселей, для иконки на домашнем экране. Так сайт выглядит аккуратно, если его сохранили в iOS.
Примеры размеров
16×16
32×32
48×48
96×96Пример: один и тот же favicon в разных размерах
Как лучше рисовать favicon
При создании значка держите в уме такие принципы:
- Простота: Значок маленький, поэтому простые формы работают лучше. Мелкие детали на малом размере пропадают
- Высокий контраст: Берите цвета с хорошим контрастом, чтобы значок читался на разном фоне браузера
- Связь с брендом: Favicon должен быть узнаваем как часть вашего визуального стиля
- Масштаб: Проверьте, что дизайн живёт и в 16x16, и в 512x512 пикселей
- Проверка: Посмотрите значок в разных браузерах и на разных устройствах
Хорошие примеры: простые, контрастные значки
Избегайте: перегруженные или слабоконтрастные рисунки
Как сделать favicon
Сделать значок сейчас проще, чем раньше. Можно начать с нуля или взять готовый дизайн:
Онлайн-генератор
В logo87.com достаточно ввести текст, выбрать цвета и шрифты и скачать пакет со всеми нужными размерами и форматами. Это самый простой путь, если нет опыта в дизайне.
Конвертация готового изображения
Если уже есть логотип или картинка, SVG в PNG превратит её в нужные форматы и размеры, чтобы значок совпадал с брендом.
Дизайн с нуля
Дизайнеры могут нарисовать значок в графическом редакторе и подогнать каждый размер по пикселям. Так вы полностью контролируете результат.
Заключение
Favicon невелик, но это часть лица сайта. По нему узнают ресурс, укрепляют бренд и упрощают навигацию. Несколько форматов и размеров дают аккуратный вид и стабильную работу во всех браузерах и на всех устройствах.
Генератор, конвертация картинки или рисунок с нуля — любой из этих путей стоит того: аккуратный значок повышает ощущение профессионализма и удобства. Разобраться, как его сделать, полезно для сильного образа в сети.