Favicon и SEO: для чего нужен маленький ярлычок у веб-сайта

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

Что же такое фавикошка?

Для тех, кто не знаком с этим термином, поясняем: favicon — это графический элемент (размером 16x16 пикселей), который размещается в коде сайта и отображается в поисковой выдаче рядом с заголовком. Чаще всего используется логотип или простая картинка (буква, цифра или значок). Чтобы поисковые системы и другие сервисы распознали этот файл как фавикон, его следует назвать «favicon.ico».

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

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

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

• Помогает запомнить сайт. В условиях, когда найти короткий и доступный домен становится все сложнее, яркий и заметный фавикон помогает пользователям запомнить сайт, даже если его название длинное и непонятное.
• Упрощает поиск среди множества вкладок. Когда открыто много вкладок в браузере (по 30-40 одновременно), наличие запоминающегося фавикона помогает быстрее найти нужный сайт. Аналогично, в истории просмотров предпочтительнее искать по ярлычку, чем пролистывать десятки URL.
• Выделяет сайт в поисковой выдаче. В некоторых поисковых системах фавикон выводится в сниппете (например, в Яндексе). Это позволяет вашему сайту выделяться среди прочих, что увеличивает кликабельность и, соответственно, конверсии.

Устанавливаем фавикон на сайт

Для начала выберите изображение, которое будет использоваться в качестве фавикона, и переименуйте его в favicon.ico. Рекомендуется использовать формат PNG, чтобы избежать появления белого фона. Наиболее распространенный размер иконки — 16x16 пикселей, но существуют и другие форматы:

• 32x32 — для старых версий Internet Explorer и Safari;
• 57x57 — для устройств iPhone;
• 72x72 — для планшетов iPad;
• 114x114 — для высококачественных экранов Retina;
• 144x144 — для iPad с Retina-дисплеем.

После того как изображение будет подготовлено и переименовано, его нужно загрузить в корень сайта, используя FTP-клиент или панель хостинга. Проверьте, что фавикон доступен по адресу: имясайта.ru/favicon.ico.

Для добавления фавикона в -код используйте следующий шаблон: <link rel="icon" href="имясайта.ru/favicon.ico" type="image/x-icon">. Важно заметить, что для старых версий браузеров IE может потребоваться добавить атрибут rel="shortcut icon".

Если ваш сайт ориентирован на мобильные устройства Apple, добавьте атрибут rel="apple-touch-icon", чтобы фавикон корректно отображался на iPhone и в списке часто посещаемых сайтов на MacOS.

Какое изображение выбрать для фавикона?

Выбор изображения для фавикона важен, поскольку именно оно будет ассоциироваться с вашим сайтом. Хороший фавикон должен быть простым, но запоминающимся. Рассмотрим несколько типов фавиконов:

• Простые изображения. Например, буквы, цифры или геометрические фигуры. Такие изображения легко распознаются и запоминаются, особенно если другие сайты используют сложные или мелкие элементы.
• Тематические изображения. Для некоторых сфер (медицина, строительство и т. д.) логично использовать узнаваемые символы, такие как крест или каска. Важно, чтобы пользователи могли быстро ассоциировать эти картинки с вашим сайтом.
• Элементы брендбука. Если у вашей компании есть брендбук, можно использовать его элементы, например, логотип. Однако учитывайте, что сложный логотип может быть плохо виден в маленьком формате.
• Контрастные изображения. Если большинство сайтов в поисковой выдаче используют похожие фавиконы, контрастный элемент поможет выделиться среди конкурентов и привлечь внимание пользователей.

Выводы

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

Для дополнительных консультаций по вопросам SEO и веб-разработки можно обратиться в студию SEO COMPUTER по любому вопросу на email info@seo.computer.

id 1687