Что такое фавиконки
для сайта? Часть 1

Иконка, которая отображается на вкладке страницы вместе с ее заголовком называется фавиконка. Как правило, такая иконка содержит логотип, первую букву названия бренда либо изображение, которое релевантно тематике ресурса. 

Такой значок привлечет внимание ваших пользователей, а также укрепит индивидуальность вашего бренда. Читайте дальше, чтобы подробнее узнать, что такое фавиконки и почему их считают важным элементом веб-дизайна. 

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

Фавиконка (Favicon) — это небольшая картинка, которая отображается в сниппете в результатах поиска в браузер рядом с названием сайта в адресной строке браузера. Фавиконку также можно увидеть в списках закладок, страницах результатов поисковых систем (SERP), панелях инструментов и истории браузера. Хороший пример — фавиконка Google. Это один из самых узнаваемых значков. 

Где можно увидеть фавиконки?

Если вы ранее заходили на сайт нашего агентства, то при вводе «binn» в поисковой строке, ваш браузер предложит вам страницы нашего сайта, которые вы ранее открывали. 

Слева от url-адреса  вы можете увидеть нашу фавиконку. Эти значки могут помочь пользователям с легкостью идентифицировать страницы, которые они ранее посещали.

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

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

Почему фавиконки — это важно?

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

Обратите внимание, что на веб-сайтах Joy Us Garden и Easy to Grow Bulbs на фавиконке есть изображения цветка, а на сайте The Succulent Source — серый глобус. Глобус — это значок по умолчанию, который Google устанавливает для веб-сайтов, у которых нет собственной фавиконки.

Скорее всего пользователь, который оставил запрос «как часто следует поливать суккуленты?», сделает выбор в пользу 1-го либо 2-го варианта. Во первых эти сайты расположены первыми в поисковой выдаче, а их значки, URL-адреса, заголовки страниц и мета-описания указывают на то, что это веб-сайты, которые посвящены растениям.

Теперь представьте, что эти три веб-сайта расположены на вкладках вашего браузера. Очевидно, что гораздо проще запомнить пользовательские значки Joy Us Garden и Easy to Grow Bulbs, чем значок по умолчанию The Succulent Source. 

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

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

Оптимальный размер значков — 120 × 120, 32 × 32 или 16 × 16 пикселей. Именно так они отображаются на вкладках браузера, в адресной строке и списках закладок. В идеале вам нужно создать значки разных размеров. Таким образом пользователи на больших экранах смогут увидеть четкую версию вашего значка. 

Возможные форматы фавиконок: SVG (рекомендуемый), ICO, GIF, JPEG, PNG, BMP. Анимация не поддерживается.

Ниже рассмотрим популярные размеры значков:  

• 16×16: размер значков браузера.
• 32×32: размер значков ярлыков на панели задач.
• 96×96: размер значков ярлыков на рабочем столе.
• 180×180: размер значков Apple Touch.
• 300×300: размер, требуемый Squarespace.
• 512×512: размер, требуемый WordPress.

^{Источник: hubspot.com}