Эта статья предназначена для тех, у кого пока нет своего сайта, и для владельцев сайтов, которые хотят повысить их юзабилити и поднять свой сайт в результатах поиска.
Содержание
Что такое favicon
Favicon (сокр. от английского FAVorite ICON — «значок для избранного») — значок веб-сайта или веб-страницы. Это иконка, чаще всего с логотипом компании либо с изображением первых букв названия сайта.
Для чего он нужен
Как следует из дословного перевода, 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. |
Тип ресурса
· icon — учитывается большинством браузеров;
· shortcut icon — учитывается браузером Internet Explorer.
Адрес файла
Для описания кириллического адреса фавиконки используйте Punycode. Например для адреса https://мой-сайт.рф/favicon.ico нужно указать https://xn—-8sbzclmxk.xn--p1ai/favicon.ico.
Тип передаваемых данных. Зависит от формата файла
· 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 непосредственно в тему, лучше прописать в 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 и о том, как его создать, вы можете прочитать в нашей статье.
