Фавикон — маленькая, но очень важная иконка

Статья обновлена 04.03.2024

Что такое фавикон

Термин Favicon образован путём сочетания двух английских слов: Favorites — избранные и Icon — значок. Каждый современный сайт обладает собственной иконкой, которая отображается во вкладке браузера. Эти значки показывают некоторые поисковые системы напротив каждого сайта в поисковой выдаче. Иконка будет также отображаться на мобильных устройствах, если пользователь вынесет любимый сайт на рабочий стол для быстрого доступа.

Читать также

7 простых UX улучшений для e-commerce сайтов, которые повысят вашу прибыль

Оптимизация пользовательского опыта в онлайн магазине может показаться сложной задачей. В этом процессе очень много переменных и иногда непонятно с чего начать. …

Еще

Иконки были разработаны компанией Microsoft. Это небольшие графические файлы в формате .ico. На заре развития интернета создатели сайтов использовали изображения размером 16 на 16 точек. Сегодня размер вырос в два раза. Это обусловлено повышением плотности пикселей на дисплеях. Встречаются статические и динамические иконки. Последние могут нести дополнительную информацию — изменять внешний вид при различных событиях на сайте, например, при поступлении сообщения из чата обратной связи.

Где его можно увидеть

Иконка фавикон отображается на панели закладок.

В поисковой выдаче Яндекса, а также в новостном разделе.

На панели закладок, а также на открытых вкладках в любом браузере.

На домашнем экране мобильного устройства, в случае добавления сайта в избранное.

В поисковой выдаче Google фавиконы не видны, но это не повод не добавлять такие изображения на свой сайт. Как видите, мест, где отображается иконка, предостаточно: браузерные вкладки, Яндекс, закладки избранных сайтов. Это особые места расположения и важно быть в них заметными — выделяться индивидуальной картинкой. Далее расскажем, почему именно.

Зачем фавикон на сайте 

Обычно Favicon устанавливают сразу после создания сайта. Файл помещается в корневую директорию на хостинге. Вот несколько причин, почему установка значка делает сайт привлекательным для посетителей:

• Выделение сайта в поисковой выдаче. Некоторые поисковые системы, например, Yandex — показывают иконку напротив каждого сайта после ввода поискового запроса. Яркий значок привлекает внимание пользователей, иногда даже заставляя кликать по ссылке.
• Упрощение поиска. При просмотре списка недавно посещённых сайтов гораздо проще найти ресурс с яркой иконкой. Кроме того, значки отображаются в закладках браузера. Значит, пользователи найдут любимый сайт гораздо быстрее.
• Визуальная привлекательность. Владельцы мобильных устройств нередко сохраняют закладки на главный экран, чтобы не тратить время на поиск любимых сайтов. Чёткая и красивая иконка станет приятным дополнением на рабочем столе. Главное, чтобы изображение соответствовало нужному разрешению.
  Устранение ошибок. Перед загрузкой сайта браузер обращается к файлу Favicon.ico, который обычно хранится в корневой директории хостинга. Если файл отсутствует — в журнале сервера появляется ошибка 404, означающая отсутствие документа по указанному адресу.
• Повышение функциональности. Динамический Favicon позволяет отслеживать изменения на сайте без открытия нужной вкладки браузера. Например, можно показывать уведомления, количество личных сообщений и другую информацию, полезную пользователям.

Какой значок выбрать

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

Итак, идеальный фавикон для вашего сайта может быть:

Тематический

Изображение должно соответствовать тематике сайта. Например, если ресурс принадлежит бренду, желательно поставить его логотип. Слишком сложный логотип можно обрезать так, чтобы не потерять узнаваемость. 

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

Контрастный

Высокая контрастность изображения привлекает внимание потенциальных пользователей и мотивирует нажать по ссылке в поисковой выдаче. Идеально подходят яркие цвета — красный или оранжевый. Некоторые владельцы информационных сайтов рисуют небольшую стрелку «вправо».

Простой

В поисковой выдаче значки обладают небольшим размером. То же касается закладок браузера. Поэтому мелкие детали изображения становятся почти неразличимыми при уменьшении. Если владелец сайта решил использовать шрифт, лучше нарисовать начальную букву названия бренда в тематическом стиле.

Креативный

Favicon может быть одновременно простым и оригинальным. Желательно пользоваться услугами опытных дизайнеров для наилучшего результата. Тогда затраты на создание значка обязательно окупятся — посетители сайта запомнят фирменный стиль. 

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

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

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

Размер фавикон для сайтов

Стандартный размер для сайтов — 32 на 32 точки. Такое разрешение хорошо выглядит во многих браузерах. При необходимости программное обеспечение самостоятельно масштабирует изображение до нужного размера. Формат файла иконки — .ico.

Для устройств на Android

Лучше всего подходят графические файлы .png размером 180 на 180 точек. Чтобы прописать расположение значка, рекомендуется пользоваться Web App Manifest. Значок останется хорошо читаемым даже после добавления закладки на рабочий стол.

Для устройств на iOS

Обычно устройства компании Apple работают с иконками 180 на 180 точек в формате .png. В документации Safari они называются Web Clips. Прозрачность фона должна отсутствовать. Скругление углов осуществляется автоматически при добавлении закладки на главный экран.

Также поддерживается формат .svg, который подходит для закреплённых вкладок, показываемых на Touch Bar в современных ноутбуках MacBook. Особенность рассматриваемого способа — в возможности добавления монохромной маски. При наведении курсора значок заполняется цветом и выделяется на панели.

Способы создания иконки

Плагин для Photoshop

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

Специальное программное обеспечение

Разработчики сделали отдельные программы для рисования иконок. Опытные дизайнеры могут нарисовать любой значок путём использования встроенных инструментов. Поддерживается прозрачность, регулировка размера и другие функции. Результат остаётся экспортировать в файл .ico.

Онлайн-генераторы

Самый простой вариант, не требующий покупки дорогостоящего программного обеспечения — использование конвертеров, работающих онлайн. Например, на сайте PR-CY такая задача выполняется всего за пару кликов. Нужно пройти следующие шаги:

1. Выбрать изображение с компьютера. Подойдут любые графические файлы. Рекомендуется пользоваться квадратными изображениями для повышения качества результата.
2. Подождать несколько секунд. Нажать зелёную кнопку «Скачать архив», который будет сохранен на компьютере в формате .zip.
3. Распаковать архив любым архиватором. В архиве будут находиться иконки в необходимых форматах.

Как установить фавикон

Рассмотрим 3 варианта установки фавикона: на главной странице сайте, в его подразделах, а также динамический фавикон.

Настроить фавикон для главной страницы сайта

1. Создайте изображение любым удобным способом из перечисленных нами выше.
2. Готовый файл сохраните в корневой директории.
3. Впишите ссылку на значок в код HTML главной страницы.

Рекомендуется пользоваться форматом .ico, если хотите добиться совместимости с устаревшими браузерами, например, с Internet Explorer. Современные веб-обозреватели могут показывать иконки в формате .png. Значок появляется через некоторое время после загрузки. Необходимо дождаться, пока поисковая система заново проиндексирует сайт.

Как настроить фавикон для других разделов сайта

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

Во избежание путаницы называйте иконки по-разному. Не рекомендуется использовать цифры в названии — гораздо лучше употреблять слово, характеризующее раздел. Для блога — favicon_blog, для форума — favicon_forum и так далее. Аналогично поступайте с разделами. Грамотно организованное дисковое пространство на хостинге служит залогом простого управления сайтом.

В коде нужной страницы пропишите адрес расположения нужной иконки. Сохраните изменения.

Как сделать динамический значок

Создатели современных сайтов стремятся, чтобы пользователям было удобнее отслеживать изменение информации, даже если вкладка закрыта. Использования звуковых уведомлений недостаточно, поскольку некоторые пользователи отключают звук на компьютере. Появилась идея устанавливать динамические значки. Они изменяются при определённых условиях. Триггером становятся поступление личных сообщений или прочих важных уведомлений.

К сожалению, стандартные инструменты HTML не позволяют создать динамический значок. Реализовать поставленную задачу позволяет язык программирования JavaScript. Совершенно не обязательно писать скрипт самостоятельно и тратить время. Существуют готовые решения от различных разработчиков. Большой популярностью обладает проект Favico.js, предлагающий веб-мастерам бесплатно скачать нужный скрипт.

Установка скрипта осуществляется через Yarn или Bower.

На сайте проекта выложена полная документация, описывающая использование скрипта. Приводятся примеры, позволяющие увидеть реализацию решения. Например, можно добавлять счётчик, плеер видео, изменять цветовой оттенок и так далее. Единственный недостаток — длительное отсутствие обновлений. Судя по комментариям, проект был заморожен примерно два года назад. Впрочем, возможности скрипта удовлетворяют большинство пользователей.

Установка фавикон в конструкторах сайта

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

И напоследок

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

С точки зрения дизайна, в создании действует правило «Красота в простоте». Лишние детали только усложнят процесс запоминания иконки и сделают его менее броским. 
Фавикон — неотъемлемый атрибут любого ресурса. Обязательно обратите внимание на этот шаг при создании сайта. А

Читать также

Введение в аналитику для e-commerce сайтов

Вы открыли интернет-магазин, запустили первые рекламные кампании и начали получать первые лиды, но конверсия в лучшем случае «средняя», и как это исправить, …

Еще

Надеемся, что благодаря всей этой информации ваш проект успешно стартанёт и быстро наберёт обороты!