Что такое favicon
Favicon (сокр. от английского FAVorite ICON — «значок для избранного») — значок веб-сайта или веб-страницы. Это иконка, чаще всего с логотипом компании либо с изображением первых букв названия сайта.
Для чего он нужен
Как следует из дословного перевода, favicon необходим для того, чтобы один сайт отличался от другого, и чтобы в выдаче поисковых систем было проще ориентироваться.
Он олицетворяет, по сути, сам сайт. Сейчас очень мало сайтов, у которых он отсутствует, но, тем не менее, такое встречается. Неопытные веб-разработчики забывают поставить его на сайт.
Нигде не написано, что favicon непосредственно влияет на SEO . С другой стороны, он не только повышает кликабельность, но и создаёт приятное впечатление о вашем сайте, а также продвигает ваш логотип прямо в поисковой строке Яндекса и повышает CTR вашего сайта.
Значок избавляет пользователей от необходимости читать мета-заголовки на вкладках браузера. Как и другие значки и логотипы, которые мы используем на веб-сайтах, значок он визуально сообщает пользователям, что из себя представляет веб-сайт.
Сайты, на которых нет значков, будут считаться непрофессиональными и, следовательно, будут ассоциироваться с низкими стандартами и отсутствием авторитета.
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 непосредственно в тему, лучше прописать в head страниц строку, указанную ниже. Так Яндексу будет легче его найти.
<head>
…
<link rel=”icon” href=https://mysite.com/favicon.ico type=”image/x-icon”>
…
</head>
Проверка
После установки его надо проверить. Для этого:
- Проверьте, отображается ли фавиконка в адресной строке браузера при просмотре страниц сайта.
Убедитесь, что:
- Файл доступен по прямой ссылке (ответ сервера 200 OK) — воспользуйтесь инструментом Проверка ответа сервера . Нужно просто подставить адрес вашей страницы https://mysite.com/favicon.ico и посмотреть ответ сервера.
- Файл не запрещен для индексирования, например, в robots.txt с помощью директивы Disallow. Может быть запрещен не сам файл, а каталог, в котором он размещается. Например, если сайт делался не вами, то посмотреть это можно так: https://mysite.com/robots.txt. Более подробно о robots.txt и о том, как его создать, вы можете прочитать в нашей статье.
Заключение
Для проверки иконок вашего сайта можно также воспользоваться сервисом RealFaviconGenerator . Данный сервис покажет, как отображаются ваши иконки на разных платформах, подскажет, где и какие могут быть проблемы. Кроме того, данный сервис может сгенерировать необходимые размеры, форматы иконок и код. Но необходимо проверять исходники на наличие всех рекомендуемых размеров для корректного отображения на различных устройствах.
