Фавикон (favicon) для сайта: что это такое и как его сделать

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

Favicon (от англ. FAVorites ICON — «значок для избранного») — значок сайта или страницы.

Значок отображается:

В Google фавиконки не отображаются. Поисковик периодически тестирует эту функцию, так что они могут появиться в будущем.

Хотя в результатах иностранного поисковика фавиконов нет, они все равно отображаются на вкладках браузера и в закладках.

Android

Обычно используют файл .png размером 180×180, можно использовать прозрачность. Указать фавикон и его расположение для Android можно через спецификацию Web App Manifest. В ней описан простой JSON-файл, в котором веб-мастеры указывают иконки, размеры и форматы для сайта или приложения.

Манифест указывают с помощью:

Apple

Для iOS иногда используют размер 57×57, но рекомендуют лучше делать иконку PNG размером 180×180. В документации Safari такие называются
Web Clips, в них не должно быть прозрачности, углы автоматически округлятся при добавлении на главный экран. Это значок высокого расширения, он будет отображаться и в других браузерах.

В rel нужно указать “apple-touch-icon.png”.

Пример кода:

Edge и ie 12

Цвет файла и фона для иконки можно указать с помощью метаданных в HTML.

Пример кода:

У Microsoft есть
«Browser configuration schema reference» — XML-документ, в котором перечислены различные значки, соответствующие интерфейсу. Файлы конфигурации браузера позволяют задавать настройки с помощью внешних XML-файлов.

Пример кода:

‎favicon factory

Достаточный пакет фавиконок для популярных браузеров

Стандартно для фавикона делают файл favicon.ico — это контейнер для нескольких файлов. Будет достаточно favicon.ico с файлами в размерах 16×16, 32×32 и 48×48.

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

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

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

Favicon привлекает внимание к сайту. Без иконки сниппет меньше заметен взгляду, кажется, что ему чего-то не хватает.

• С фавиконом сайт запоминается лучше

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

• Упрощает поиск нужного сайта

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

• Избавляет от ошибки в лог-файлах

Браузеры запрашивают файл
favicon.ico и если не находят строку с указанием фавикона, сервер отмечает в логах ошибку 404.

К примеру, такую:

Как включить иконки сайтов (поддержку фавиконов) в safari на iphone и ipad (работает на ios 12 и новее)

1. Откройте Настройки;

2. Выберите из списка Safari;

3. Активируйте переключатель Показать значки на вкладках.

♥ ПО ТЕМЕ: Как включить вспышку (фонарик) при звонках и уведомлениях на iPhone.

Как включить поддержку фавиконов в macos mojave и новее

1. Запустите браузер Safari;

2. В строке меню (в верхнем левом углу) выберите Safari → Настройки → Показать иконки во вкладках.

И опять-таки, XXI век приветствует Вас :).

Как работает приложение faviconographer

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

Как создать favicon для сайта

Есть три самых распространенных способа:

1. Специальный плагин для Photoshop
   Позволяет работать этому популярному редактору изображений с форматом ico.
2. Специальные программы для изготовления фавиконов
   Они специально «заточены» для изготовления иконок для сайта.
3. Онлайн генератор favicon
   Самый простой и доступный способ — загрузить картинку в генератор, который сделает иконку для сайта из любого изображения. Иконка получится красивее, если изображение-донор кадрировать до квадрата.

Загрузите квадратную картинку в генератор от PR-CY, он создаст архив с файлом ICO, в котором будет несколько вариантов фавикона, в том числе ретина иконки.

Как установить разные favicon для отдельных страниц

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

Как установить разные фавиконки разделам сайта:

1. Фавикон для главной и остальных страниц назовите favicon.ico, для отдельных разделов укажите названия по этим разделам, чтобы не запутаться.
2. В коде нужной страницы пропишите путь к другой фавиконке раздела:

Какую картинку выбрать для фавикона

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

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

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

Фавикон не будет выделять сайт в выдаче, если у конкурентов будут такие же картинки. Банальные популярные иконки лучше не использовать.

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

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

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

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

Формат favicon

Изначально картинки для фавиконов создавали только в формате .ico. Этот формат использовал для закладок Microsoft Internet Explorer. Иконки помещали в корневой каталог сайта под именем favicon.ico.

Формат .ico удобен, поскольку в нём можно указать несколько размеров иконок с различной битностью. Минус в том, что браузеры не всегда правильно выбирают размер изображения и в итоге фавикон отображается в низком разрешении.

Позже на смену .ico пришли форматы .png и .svg. Они хорошо отображаются и меньше весят. Большинство современных платформ и операционных систем поддерживают .png, а формат .svg используют в Safari MacOS.

Иногда фавиконки делают в форматах .jpeg и .gif. Это допустимо, но нежелательно, поскольку поддерживают эти форматы не все браузеры. Firefox и Opera разрешают использование анимированных «гифок», но не рекомендую их применять — движущиеся картинки будут отвлекать внимание посетителя при просмотре сайта и раздражать пользователя при отображении среди браузерных вкладок.

В таблице показаны версии основных браузеров и поддерживаемые ими форматы фавикона:

На текущий момент основные форматы для фавикона —  это .ico и .png. Формат .jpeg в некоторых случаях может отображаться некорректно. Для Safari MacOS лучше применять .svg. А вот прочие форматы использовать нецелесообразно из-за плохой поддержки.

Для хорошего отображения фавиконов в разных контекстах желательно создавать иконки в двух вариантах:

• С прозрачным фоном. Значок будет показан рядом с URL-адресом: в закладках, в адресной строке и прочее.
• Со сплошной заливкой. Отображается там, где устройство или браузер использует маску для фона: в контекстном меню, в сетчатых закладках.

В таблице я показала,  какие стиль и размер фавикона в форматах .png/.svg выбрать для разных браузеров и операционных систем

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