Успешное SEO продвижения сайта зависит от  многих  показателей. Помимо самых очевидных нюансов, влияющих на положение в поисковой выдаче, существуют и такие, которые не столь заметны. Сегодня поговорим о таком элементе, как фавикон сайта.

Напрямую он никак не связан с местоположением сайта среди результатов поиска. Его влияние на ранжирование не доказано. Однако, наличие фавикона, а также его вид, существенно отражается на поведении пользователей, что в свою очередь играет роль в SEO.

Что такое фавикон и зачем он нужен.

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

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

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

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

Итак, как же создать идеальную иконку, которая будет работать на вас? Для этого необходимо учесть несколько факторов:

• Отражение тематики сайта. Очень часто, не выдумывая ничего нового, для фавиконов используют логотип фирмы. Чаще всего он уже продуман и обкатан, возможно даже хорошо узнаваем, что сыграет только в плюс. Однако, не всегда можно использовать логотип компании для иконки без изменений. И тут мы переходим ко второму пункту.
• Простота линий. Дело в том, что размер фавикона очень маленький. Логотипы же иногда довольно витиеваты и не могут быть уменьшены без потери наглядности. В таких случаях мы рекомендуем использовать часть логотипа или названия и фирменную палитру цветов , но не больше трех.
• Яркая картинка. Даже если цвета вашей фирмы не яркие, лучше добавить к ним яркий акцент для привлечения внимания. Сегодня на первой странице выдачи практически у всех результатов будет фавиконка. Среди этого иконка пастельных оттенков просто затеряется и не принесет вам желаемых бонусов. Ваша картинка должна привлекать внимание и выделяться на фоне остальных.
• Оригинальность. Выделиться среди конкурентов нам поможет и интересное решение в дизайне иконки. Например, можно использовать яркие стрелки, направленные в сторону текста сниппета, значок процента, поскольку он хорошо ассоциируется с тематикой скидок. Однако, надо следить еще и за тем, чтобы фавикон был уникальным. Например, если в выдаче окажется несколько ресурсов с одинаковыми иконками, это никак не поможет улучшить узнаваемость и видимость. Наоборот это может сыграть злую шутку с компанией, поскольку приведет к путанице. Также использование чужого фавикона может грозить юридическими проблемами.

Какой размер должен быть у иконки?

Теперь, когда мы обсудили дизайн изображения, коснемся его форматов и размеров. Разберем этот вопрос на примере требований к фавиконкам поисковиков Яндекс и Google. Параметры эти довольно быстро меняются. Например, требования Яндекса к иконкам в 2016 году выглядели так:

Как показывает скрин выше, для правильного отображения фавикона требовался совершенно конкретный размер картинки и предпочтение отдавалось формату .ico.  Затем такие форматы как .png и .svg стали набирать большую популярность. Сейчас большинство браузеров их поддерживают и они намного удобнее.

.svg, — векторный формат — удобен тем, что хорошо отображается при любом разрешении. .png же, засчет своего прозрачного фона, тоже иногда очень важен для придания эстетики, особенно при темной теме в браузере. Сейчас требования Яндекса выглядят уже совсем по-другому:

Как мы видим, предпочтителен уже размер намного больше, 120*120 и формат .svg.

У Гугла желателен другой размер файла, он отдает предпочтение размерам, кратным 48 пикселям.

Итак, получается, что для хорошего отображения в различных браузерах, нам предстоит создать фавиконки разных размеров. Чаще всего ограничиваются созданием файлов в трех размерах: 16х16, 32х32, 48х48 пикселей. При необходимости он легко масштабируется в нужный размер в каждом конкретном случае.

Как создать фавикон?

Теперь, когда мы знаем какую картинку нам стоит выбрать для фавиконки и ее параметры, обсудим вопрос ее создания. Если у вас есть опыт работы в графических редакторах, вы сможете сделать фавикон самостоятельно при помощи Photoshop или Figma. В Photoshop есть даже специальное расширение, которое поможет создать файл ico.

Однако, если тратить столько времени для создания иконок не хочется, можно воспользоваться одним из онлайн генераторов фавиконов. Расскажем о нескольких из них.

Онлайн сервис Realfavicongenerator.

Сервис на английском языке, но довольно прост в использовании. В процессе создания вы можете пользоваться различными настройками: фона, отступов, цветовой схемы. Для генерации фавиконки вам потребуется картинка 260*260 пикселей. Загрузив ее на сайт и подождав некоторое время, вы получите набор из иконок самых необходимых форматов а также код, который необходимо будет поместить на сайт. Так выглядит результат — пакет с файлами-иконками:

А так выглядит код, который нужно будет вставить на ваш сайт:

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

А так сервис показывает вид вашего значка в браузерах:

Онлайн генератор pr-cy.

Favicon для сайта можно сделать в русскоязычном онлайн сервисе pr-cy.ru. Без регистрации возможно будет использовать инструмент 5 раз. Для создания иконки вам потребуется загрузить изображение 512×512 пикселей или указать ссылку на исходную картинку. Далее программа создаст набор иконок в файле favicon.ico и код для сайта.

Существует еще множество онлайн генераторов фавиконов, таких как: Favic-o-matic, Favicon.ico & App Icon Generator, Favicon.cc. Вы можете выбрать сервис на свой вкус, все они будут работать примерно по одинаковому принципу.

Как добавить фавикон на сайт.

После того, как мы сделали набор иконок, нам предстоит их разместить на нашем сайте. Для начала нам необходимо будет полученные иконки разместить в корневой папке нашего сайта. Далее настраиваем код главной страницы сайта. Открываем его и ищем в коде тег <head>, туда нам нужно будет прописать кусок кода, полученного из онлайн генератора.

После всех манипуляций очень важно не забыть проверить, индексируются ли наши изменения. Ссылка на фавикон в файле robots.txt должна быть открыта для индексации. А прямая ссылка на файл должна отдавать ответ сервера 200 ОК (в Яндексе можно проверить тут).

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

Как проверить фавикон сайта.

Чтобы посмотреть как отображается наш фавикон можно воспользоваться проверкой в сервисе Realfavicongenerator, о котором мы рассказывали выше, а также в Яндексе или Гугл.

Для проверки в Яндексе вставляем в адресную строку следующую ссылку: https://favicon.yandex.net/favicon/имя_вашего_домена

Чтобы увидеть отображение иконки в Гугл, надо вставить такую ссылку: https://www.google.com/s2/favicons?domain=имя_вашего_домена

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

Подведем итоги.

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

Да и сервис «вебмастер» Яндекса неспроста в своих рекомендациях  обязательно напишет, «настройте favicon»  если у вашего сайта его нет или что-то неправильно настроено. Самое главное – помнить о том, что иконка должна хорошо смотреться (ведь картинка будет очень маленькой), быть оригинальной (яркая и уникальная иконка поможет выделиться в списке) и, по возможности, нести в себе призыв к действию (например, стрелка в сторону основного текста сниппета).