Перейти к основному содержанию
Маленький фавикон – большая польза для SEO: для чего нужен ярлычок веб-сайта

Фавикон (англ. Favicon) – небольшое графическое изображение, которое презентует Ваш сайт на вкладках браузеров, в списках закладок, в истории и результатах поиска, а также в поисковых объявлениях. Это очень важный элемент брендирования и улучшения юзабилити (проще говоря - узнавания веб-сайта среди других).

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

Дадим информацию для новичков и более опытных владельцев проектов в Интернете. Поехали!

Что такое фавикон?

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

Картинку в файле favicon.ico (или в других форматах – об этом позже) и помещают в корневом каталоге сайта. Первым формат этого файла начал поддерживать браузер Microsoft Internet Explorer 5, выпущенный в далеком 1999 году.

Фавикон обозначали как «ярлык» (shortcut icon) в элементе rel кода раздела сайта.В конце 1999 года значок стандартизировали на консорциуме World Wide Web (W3C), сделав элементом гипертекстовой разметки HTML.

Первоначально фавикон выполнял исключительно техническую функцию «метки» для URL-адреса. Однако сейчас его предназначение изменилось, и эти значки размещают в первую очередь для пользователей. Они нужны для брендирования и повышения удобства использования сайта.

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

пример фавикона

Также фавиконы отображаются в списке закладок большинства браузеров.

Если Вы ищете нужный сайт в разделе «История» Google Chrome, именно с помощью фавиконов можно находить страницы намного быстрее.

история фавиконок в браузере

Некоторые поисковые системы отображают значки в результатах поиска по ключам. Пример – DuckDuckgo. Те, кто используют этот поисковик, видят примерно такую выдачу:

фавикон duckduckgo

Более востребованный в Рунете поисковик Яндекс тоже отображает фавиконы:

фавиконы в яндексе

Google отказался от демонстрации фавиконов – в результатах поисковой выдачи их уже нет. Но сообщается, что идет разработка инструмента для отображения значков в объявлениях Google Adsense.

Так что если Вы оптимизируете свой сайт только под Google, не спешите отказываться от удобной маленькой картинки.

Зачем использовать фавикон?

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

Узнаваемость бренда

Фавикон, по сути – идентификатор Вашего сайта. Если он оригинальный, заметный и понятный – именно по этому ярлычку пользователь запомнит Ваш веб-ресурс при просмотре нескольких аналогичных проектов. Неважно, что делает Ваш потенциальный посетитель – просматривает историю, ищет информацию в Яндексе или смотрит список закладок, - фавикон поможет быстро распознать нужный сайт. Никакого секрета в этом нет: человек всегда лучше воспринимает и запоминает графические изображения, а не текст.

Доверие

Если на вашем сайте нет значка, веб-браузер отобразит на вкладке пустой документ по умолчанию. А теперь представьте: пользователь открыл Ваш проект и веб-ресурс конкурента. У Вас нет фавикона, а конкурент предусмотрел запоминающийся ярлычок. В глазах клиента сайт Вашего соперника будет более профессионально проработанным – а это значит, доверия к нему будет больше. Придется дорого заплатить за небрежность: сравнивая, аудитория в большинстве случаев выберет проекты с фавиконами. Подумайте сами, где бы Вы покупали авиабилеты: на первых двух вкладках или на последней?

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

Возврат посетителей

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

Экономия времени пользователей

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

Поведенческий фактор или элемент продвижения: как фавикон влияет на SEO?

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

Речь идет об удобстве для пользователей. Если поисковая система отображает фавиконы, в естественной выдаче конкуренцию будут выигрывать сайты с ярлычками. Заметный фавикон позволяет идентифицировать сайт быстрее и проще: это незначительно, но будет влиять на рост количества кликов, следовательно – на рейтинг ресурса в поиске.

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

Косвенное влияние на SEO – важнейший фактор: из таких небольших, но хорошо проработанных элементов (фавикон, метатеги) и складывается удачный рейтинг в поиске. Если влияние фавиконки на продвижение сайта косвенное, то какие факторы важны для эффективной SEO-оптимизации? Ответы – в нашем видео:

Фавиконы для разных браузеров

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

Отсюда вопрос: какие требования к фавиконам для десктопной и мобильной версии сайта? Хотелось бы ответить «все требования стандартные», но, увы, это не так. Стандарты для фавиконов отличаются в зависимости от того, какой браузер применяет пользователь.Естественно, требования к ярлычкам для мобильных веб-браузеров тоже отдельные.

Рассмотрим, как настраивать фавиконы с учетом этих условий.

Итак, Вы загрузили файл favicon.ico в корневую папку, и теперь Вам нужно поместить его в раздел сайта. Вот код, используемый для этого:

С 2010 года стандарты изменились. Спецификация HTML5 позволила не указывать shortcut icon в элементе rel. Это отличная новость, но не для пользователей браузеров IE 10 и ниже.

Понимаем, что таких почти не осталось.

Но все же: для них элемент rel все еще должен содержать shortcut icon. Если Вы хотите учесть предпочтения пользователей Internet Explorer, укажите при настройке фавикона код:

Для остальных современных браузеров (Opera, Chrome, Firefox и так далее) подходит следующий код:

Традиционно все браузеры отображали только фавиконы, которые были сохранены в формате файла .ico.

Однако сейчас большинство программ для веб-серфинга  также хорошо воспринимают формат .png.

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

Сейчас Chrome, FireFox и Opera являются единственными браузерами, которые будут идентифицировать и использовать favicons .png.

А теперь о размерах.

Требования разработчиков браузеров, устройств и даже мониторов к параметрам фавиконов отличаются.

Поэтому при создании и настройке ярлыка следует учитывать такие стандарты:

  • 16х16 пикселей – типовой размер для фавикона. Подходит для большинства устройств и типов браузеров;
  • 32х32 – встречается крайне редко, только в IE, а также в Safari;
  • 57х57 – формат ярлычков, отображаемых в iPhone;
  • 72х72 – стандарт фавиконов для iPad;
  • 114х114 – для отображения на Retina дисплеях;
  • 144х144 – для Retina дисплеев на iPad.

Таким образом, если Вы решите использовать фавикон в .png, Вам придется указывать разные размеры значков:

Если вы не хотите, чтобы Safari iOS добавляла какие-либо дополнительные эффекты к вашим знакам (например, закругленные углы и глянцевые эффекты), вам просто нужно добавить слово «precomposed» в код следующим образом:

Если вам нужен только один код, который работает для Android и iOS, используйте следующий:

Итак, каковы преимущества использования favicon для мобильных браузеров?

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

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

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

Favicon.cc

создание фавикона

Достойный сервис, позволяющий нарисовать иконку самостоятельно или обработать предварительно загруженный графический файл. Радует простой интерфейс, богатая палитра цветов и набор инструментов. Особого внимания заслуживает коллекция фавиконов – она огромная. Искать подходящую картинку можно с помощью тегов. Ярлычок разрешено использовать или корректировать. Весь функционал доступен бесплатно и даже без регистрации. Единственный минус – англоязычный интерфейс.

Logaster

создание логотипа онлайн

На сервисе Логастер нельзя сразу перейти к созданию фавикона: сначала система предлагает разработать логотип. Ярлычок после будет сформирован на его основе. Логика следующая: у сайта должен быть цельный дизайн, поэтому логотип и иконка обязаны перекликаться. Что ж, смысл в этом есть. Принцип разработки следующий: Вам нужно ввести название своего проекта, после чего система автоматически подберет варианты логотипов и даст возможность изменить их в редакторе. Готовую картинку можно скачать в форматах .ico и .png, в любых распространенных размерах. Плюсы – русскоязычный интерфейс и много подсказок. Минусы – сервис платный.

FaviconGenerator.com

favicon generator

Простой и бесплатный англоязычный сервис по созданию фавиконок на основе готовых изображений. Все очень просто: выбрали размер, загрузили картинку, получили готовый к скачиванию ярлычок со ссылкой. Идеальный вариант для тех, кому нужно создать этот элемент из логототипа или понравившегося изображения. Размер загружаемого файла должен быть до 2 Мб. Допустимые форматы: PNG, JPEG, JPG, GIF.

DeGraeve.com

DeGraeve

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

Realfavicongenerator.net

Этот ресурс обязательно должен быть в подборке – ведь именно с помощью него можно избавиться от «головной боли» при настройке размеров фавикона для разных типов устройств и браузеров. Интерфейс англоязычный, но интуитивно понятный. Загрузите картинку – и далее система откроет страницу с настройками размеров и прозрачности, с предпросмотром для всех существующих форматов.

Realfavicongenerator

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

Напоследок: все, что вы хотели знать о фавиконах и боялись спросить

Какой формат лучше?

Раньше основным и единственным форматом был .ICO. Сейчас его принято считать устаревшим и использовать в качестве альтернативы формат .PNG. Самый современный вариант расширения - .SVG. Он намного упрощает процесс настройки и хранения данных о разных размерах картинки. Но, увы, его поддерживают не все устройства. Допускаются форматы .GIF и .JPEG, но их применение нецелесообразно: поддержка таких расширений крайне низкая.

Если фавикон в .ICO, пора его срочно переделывать?

Однозначного ответа нет – потому что для старых версий браузеров такой формат является единственно возможным. Если вы не хотите списывать со счетов аудиторию, использующую устаревшие программы для веб-простора – оставьте версию фавиконки в том числе и в расширении .ICO.

Фавикон не индексируется поисковой системой, что делать?

Для прохождения успешной индексации ярлычка нужно выполнить несколько условий: создать подходящее изображение в актуальном формате, прописать правильный код (это мы рассматривали выше) и ожидать примерно месяц или два. Фавиконки обычно индексирует отдельный поисковый робот. Если Вы выполнили все условия – просто наберитесь терпения.

Выводы

Несмотря на то, что фавикон – самая маленькая часть дизайна Вашего сайта, его значение большое. Удобство для запоминания, брендинг, заметность – все эти преимущества помогут сделать Ваш проект более успешным и в плане повышения юзабилити, и (возможно) в плане роста поискового рейтинга.

Обязательно установите фавикон на сайт. Предусмотрите, чтобы он отображался на большинстве современных устройств (включая мобильные). Пользуйтесь удобными онлайн-сервисами для создания ярлычка.

В этой статье была собрана вся необходимая актуальная информация о фавиконках. Изучите ее, примените знания на практике и улучшайте показатели проекта. Вы потратите на ярлычок несколько минут – он же будет работать на Вас постоянно.

Об авторе

Директор компании SEOquick, автор многочисленных статей и публикаций. Сфера интересов: контекстная реклама, продвижение, поисковая оптимизация и OutReach.