Создание favicon для сайта 2021

Поделиться в facebook
Поделиться в twitter
Поделиться в vk
Поделиться в whatsapp
Favicon – это иконка сайта. Видно её и в любом браузере, и в поисковых строках Яндекса, и во многих приложениях сайта, если таковые имеются. Основная его функция - сделать ваш сайт отличимым от других сайтов в поиске и более запоминающимся.
Favicon – это иконка сайта

Эта статья предназначена для тех, у кого пока нет своего сайта, и для владельцев сайтов, которые хотят повысить их юзабилити и поднять свой сайт в результатах поиска.

Содержание

Что такое favicon

Favicon (сокр. от английского FAVorite ICON — «значок для избранного») — значок веб-сайта или веб-страницы. Это иконка, чаще всего с логотипом компании либо с изображением первых букв названия сайта.

Для чего он нужен

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

Он олицетворяет, по сути, сам сайт. Сейчас очень мало сайтов, у которых он отсутствует, но, тем не менее, такое встречается. Неопытные веб-разработчики забывают поставить его на сайт.

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

Значок избавляет пользователей от необходимости читать мета-заголовки на вкладках браузера. Как и другие значки и логотипы, которые мы используем на веб-сайтах, значок он визуально сообщает пользователям, что из себя представляет веб-сайт.

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

faviconyourcom - фавикон фирмы Юрком-Консалтинг.

CTR

CTR (кликабельность, от английского click-throughrate — показатель кликабельности) — метрика в интернет-маркетинге. CTR определяется как отношение числа кликов на ссылку (баннер) или рекламное объявление к числу показов, измеряется в процентах. Формула вычисления CTR: CTR = (количество кликов / количество показов) * 100

Так какой же формат и характеристики должны быть у favicon?

Как подсказывает нам старина Яндекс  favicon должен иметь следующие характеристики:

Размер:

  • 16 × 16,
  • 32 × 32
  • или 120 × 120 пикселей (точек).

  Формат:

  • SVG (рекомендуется Яндексом) в размере 120х120 пикселей,
  • ICO (рекомендуется),
  • GIF,
  • JPEG,
  • PNG,
  • BMP.

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

Где присутствует

  • Вкладки браузера
  • Строки URL-адресов
  • Закладки браузера
  • Истории поиска в Интернете
  • RSS-каналы
  • Настольные и мобильные домашние экраны
  • Значки приложений

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

Как сделать правильный favicon?

Для начала favicon надо просто нарисовать в любом графическом редакторе, либо заказать дизайнерам товарных знаков, либо воспользоваться простейшим генератором фавиконов https://www.favicon.cc/ Полученный favicon можно скачать и даже посмотреть, как он будет выглядеть в браузере. Но мы всё-таки рекомендуем рисовать его в любом графическом редакторе.

Как правильно подключить к сайту

Нужно поместить свой файл с именем favicon в корневой каталог сайта.

Добавьте в HTML-код главной страницы сайта, в элемент head, ссылку на размещенный файл.

<head>

 …

<link rel=”icon” href=https://mysite.com/favicon.ico type=”image/x-icon”>

 …

</head>

Где https://mysite.com/favicon.ico –  полный путь к файлу favicon.

Атрибут

Описание

Возможные значения

rel

Тип ресурса

· icon — учитывается большинством браузеров;

· shortcut icon — учитывается браузером Internet Explorer.

href

Адрес файла

Для описания кириллического адреса фавиконки используйте Punycode. Например для адреса https://мой-сайт.рф/favicon.ico нужно указать https://xn—-8sbzclmxk.xn--p1ai/favicon.ico.

type

Тип передаваемых данных. Зависит от формата файла

· image/svg+xml — для формата SVG;

· image/x-icon или image/vnd.microsoft.icon — для формата ICO;

· image/gif — для формата GIF;

· image/jpeg — для формата JPEG;

· image/png — для формата PNG;

· image/bmp — для формата BMP.

Если в HTML-коде страницы ссылка на фавиконку прописана несколько раз, робот выберет иконку на свое усмотрение.

Если сайт написан в любой из CMS, то favicon установить ещё проще. Рассмотрим на примере WordPress:

Favicon устанавливается прямо в теме, в настройках “свойства сайта”.

favicon в теме WordPress

В любом случае, после вставки favicon непосредственно в тему, лучше прописать в head страниц строку, указанную ниже. Так Яндексу будет легче его найти.

 

<head>

        …

<link rel=”icon” href=https://mysite.com/favicon.ico type=”image/x-icon”>

         …

</head>

Проверка

После установки его надо проверить. Для этого:

  1. Проверьте, отображается ли фавиконка в адресной строке браузера при просмотре страниц сайта.
favicon в адресной строке. Пример.
Убедитесь, что:
  1. Файл доступен по прямой ссылке (ответ сервера 200 OK) — воспользуйтесь инструментом Проверка ответа сервера. Нужно просто подставить адрес вашей страницы https://mysite.com/favicon.ico и посмотреть ответ сервера.
 
  1. Файл не запрещен для индексирования, например, в robots.txt с помощью директивы Disallow. Может быть запрещен не сам файл, а каталог, в котором он размещается. Например, если сайт делался не вами, то посмотреть это можно так: https://mysite.com/robots.txt.   Более подробно о robots.txt и о том, как его создать, вы можете прочитать в нашей статье.

Заключение

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

Связаться с нами