В этой статье я, как вебмастер со стажем, расскажу что такое фавикон для сайта.
Итак, формулировка. Фавикон - это небольшая картинка, которая отображается в сниппете в результатах поиска Яндекса, рядом с адресом сайта в адресной строке браузера, около названия сайта в Избранном или в Закладках браузера.
Фавикон - это часть имиджа и бренда компании, он помогает распознать сайт в поисковой выдаче и вернуть преданных клиентов.
Тем не менее на многих сайтах он либо отсутствует, либо стоит фавикон автоматически подставленный движком сайта или темой оформления / шаблоном.
Порой странно видеть отсутствие фавикона даже на сайтах серьезных веб-студий, учитывая тот факт, что наличие этой иконки является рекомендацией поисковых систем Яндекса и Google. А это значит, что такие сайты будут хуже восприниматься алгоритмами поисковиков и позиции в поисковой выдаче вероятно будут снижены.
Рекомендации Яндекса по формату и размеру фавиконки для сайта
Размер: 120 × 120, 32 × 32 или 16 × 16 пикселей.
Формат: SVG (рекомендуемый), ICO, GIF, JPEG, PNG, BMP. Анимация не поддерживается.
Совет: размер 120 × 120 пикселей или формат SVG позволяют отображать логотип сайта четче и заметнее на сервисах Яндекса.
Рекомендации Гугла по формату и размеру фавиконки
Значок сайта должен быть квадратным с размерами, кратными 48 пикселям, например 48 x 48, 96 x 96, 144 x 144 и т. д. Изображения в формате SVG не имеют конкретного размера. Поддерживаются значки всех допустимых форматов.
Как установить фавикон на сайте
Итак, исходя из рекомендаций поисковиков, мы поняли, что лучше всего устанавливать фавикон в виде изображения в формате svg.
Если ваш сайт разработан на системе управления контентом (CMS) или, проще говоря, на движке, то иконка устанавливается непосредственно в настройках движка или темы оформления / шаблона.
Если ваш сайт написан на чистом HTML-коде без использования движка, то добавьте в HTML-код страниц сайта, в элемент head, ссылку на размещенный файл фавиконки в следующем виде:
<head>
...
<link rel="icon" href="https://example.com/favicon.svg" type="image/x-icon">
...
</head>
Ну, вот теперь вы знаете что такое фавикон для сайта, рекомендации поисковиков и как устанавливать эту иконку на своем сайте.
Но на этом мы не остановимся и в следующей статье разберём где и как создать фавикон для сайта онлайн.
Подписывайтесь на канал, здесь будет много важного и полезного!