Favicon - это маленькая иконка, которая отображается во вкладке браузера рядом с названием страницы, в закладках и в истории. Размер у неё крошечный, но роль заметная: именно по favicon человек находит вашу вкладку среди десятка открытых и узнаёт сайт в закладках. Без неё в этих местах показывается безликая серая заглушка.
Казалось бы, мелочь. Но детали складываются в общее впечатление. Сайт с аккуратной фирменной иконкой выглядит завершённым и профессиональным, а сайт с пустой заглушкой - недоделанным, даже если в остальном он хорош.
Где показывается favicon
Иконка появляется в гораздо большем числе мест, чем кажется. Каждое из них - это лишняя точка контакта с вашим брендом.
- Во вкладке браузера рядом с заголовком страницы
- В списке закладок и в избранном
- В истории посещений
- На стартовом экране телефона, если сайт сохранили как ярлык
- Иногда в результатах поиска на мобильных устройствах
Каким должен быть хороший favicon
Главное требование - различимость в крошечном размере. Сложный логотип с мелкими деталями и текстом в иконке превратится в нечитаемое пятно. Поэтому для favicon обычно берут упрощённый элемент бренда: первую букву, фирменный знак или лаконичный символ. Важно, чтобы он узнавался даже размером в несколько миллиметров.
Цвет тоже имеет значение. Иконка должна быть заметна и на светлой, и на тёмной вкладке. Слишком бледный favicon теряется и не выполняет свою функцию.
Технические нюансы
Современные браузеры и устройства ожидают favicon в нескольких размерах: маленький для вкладки и крупнее для ярлыка на телефоне. Поэтому правильно подготовить целый набор иконок, а не одну картинку. Иначе на части устройств favicon будет выглядеть размыто или не появится вовсе.
Это небольшая, но важная часть запуска сайта, о которой часто забывают. Мы готовим полный набор иконок на основе фирменного стиля клиента и правильно подключаем их, чтобы бренд узнавался на любом устройстве и в любом месте, где появляется ваш сайт.