Что такое фавикон сайта: польза и нюансы настройки

12518 просмотров
2021-04-09

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

Мы расскажем всё, что необходимо знать о значках в адресной строке и немного о том, как сделать favicon для сайта самостоятельно!

Фавикон: что это?

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

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

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

Что такое иконка сайта в готовом виде:

  • Образ, с которым ассоциируется бизнес или сайт;
  • Первая буква названия компании;
  • Форма или силуэт продукции (для интернет-магазинов и производителей товаров);
  • Значок бренда.

Как правило, это элемент, размером 16х16 пикселей, отображается в поисковых объявлениях, в истории браузера, в списках закладок, в сниппетах результатов поиска, а также на открытых вкладках.

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

На сегодняшний день такой термин знаком всем СЕО-оптимизаторам и веб-мастерам. Однако, большой процент обычных пользователей и владельцев е-бизнеса не знают, что такая иконка сайта возникла более 22-х лет назад.

Изначально такие иконки обозначались в элементе “rel” кода страницы как “shortcut icon”. Размещенные в корневом каталоге веб-ресурса, в 1999 они поддерживались браузером Microsoft Internet Explorer 5.

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

Со временем такой маркер URL-адреса сменил своё техническое предназначение и стал выполнять множество других функций. Владельцы веб-ресурсов всё больше начинали интересоваться тем, как создать иконку для сайта. Давайте узнаем, почему это их так взволновало и что мотивирует до сих пор широко внедрять значки в интерфейс страниц.

Чем полезна иконка сайта

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

Если же у вас открыто много вкладок, например 10-20, часть из которых из одного и того же веб-ресурса, вы увидите “метку” сайта и сможете быстро сориентироваться, облегчив себе поиск нужной страницы. Без изображения же это займёт больше времени, ведь заголовки сужены настолько, что из всего текста отображаются лишь несколько символов.

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

Та же функция выполняется и в результатах поисковой выдачи, преподнося дополнительное преимущество сайту — его узнаваемость. Демонстрируют иконки не все роботы. В отличие от Яндекса и DuckDuckgo, Google перестал отображать миниатюрные рисунки в списке результатов на запрос пользователей.

Тем, кто желает продвигаться и далее с помощью этого поисковика, не стоит расслабляться, а начинать потихоньку изучать вопрос о том, как сделать иконку сайта. Такие возможности появятся совсем скоро в объявлениях Google Adsense, ведь разработка соответствующих инструментов идет полным ходом.

Преимущества применения миниатюрных изображений

  1. Запоминаемость сайта. Внимание, которое акцентирует человек на любые вещи, на 90% зависит от зрительного восприятия. Из этого вытекает то, что в памяти лучше откладывается именно картинка или графическая ассоциация с тем или иным предметом. Зная этот простой принцип работы нашего мозга, владельцы брендов в интернете внедряют на сайты такие идентификаторы и повышают свою узнаваемость. Они эффективны в любом случае, но чем больше фавиконок, тем больше результат.
  2. Позиционирование бренда. Настроить иконки сайта рекомендуется для того, чтобы выгоднее выглядеть на фоне своих конкурентов или хотя бы не отставать от них. Бренд не будет конкурентоспособным, если вместо его логотипа на месте значка будет пустой документ, установленный браузерами по дефолту. Такому сайту не доверяют посетители, ведь он либо недоработанный, либо устаревший, либо с ошибками. С подозрительных страниц выходят быстро, не говоря уже о том, чтобы оставлять на них заявки.
  3. Экономия времени пользователей. Если вы ещё думаете над тем, как сделать иконку для сайта, выполните её в ярком и запоминающемся стиле. Заметные элементы бросаются в глаза и снижают риск удаления страницы из закладок или вкладок. К тому же, ярлычок даёт возможность клиентам тратить меньше времени на поиски вашего сайта, а значит, позволяет удержать их.

Стоит ли использовать фавикон для сайта, чтобы улучшить SEO

Фавикон, чтобы улучшить SEO

Мы уже сказали о том, что миниатюрные изображения сайта являются важными элементами брендирования и улучшения юзабилити. Но даже оценив все указанные достоинства их применения, открытым остаётся вопрос с SEO оптимизацией: зачем нужен фавикон для продвижения?

Правда: этот элемент почти никак не сказывается на результатах оптимизации веб-ресурса. А ещё правда в том, что у значков есть косвенная польза.

Убедиться в этом можно сравнив метрики двух сайтов: с графическим ярлыком и без него. Кликабельность первого гораздо выше второго, это факт. И этот показатель, как не странно, влияет на позицию сайта в выдаче. Робот определяет на первые позиции более конкурентные и популярные страницы, каковыми и являются веб-ресурсы с настроенными фавиконками.

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

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

Фавикон: размеры и требования

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

Разберём некоторые из них:

  • ico — традиционное расширение ярлыков для браузеров, но может не поддерживаться на некоторых устройствах, поскольку считается устаревшим;
  • png — формат, пришедший на замену предыдущему, во многих случаях является оптимальным вариантом;
  • jpg — поддерживается не во всех браузерах, не самый хороший вариант;
  • bmp — формат файлов, которые воспринимают и Opera, и Chrome, и FireFox.
  • svg — современное расширение, которое даёт больше возможностей для хранения данных, но ещё не адаптировано под все устройства;
  • gif — редко используемые из-за плохого качества.

Разработчики прикладных программных обеспечений кроме форматов на favicon устанавливают и ограничения по их габаритам.

Требования разработчиков по размерам иконок в пикселях выглядят следующим образом:

  • 16х16 – отображается на большинстве устройств, мониторов и браузеров;
  • 32х32 – используется только для IE и Safari;
  • 57х57 – подходит для дисплеев iPhone;
  • 72х72 – стандартное значение для iPad;
  • 114х114 – предназначены для ЖК и OLED дисплеев (Retina) продукции старше 2010 года;
  • 144х144 – для экранов Retina на iPad.

Как создать фавикон для сайта с учётом особенностей разных браузеров

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

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

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

Например, для внедрения на Chrome, Opera и Firefox подходит <link rel=»icon» href=»/favicon.ico» ENGINE=»image/x-icon» />.

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

Совет, как добавить фавикон, чтобы он отражался в мобильных версиях правильно: напишите слово «precomposed» в код, чтобы запретить вносить эффекты к картинке, чем любит заниматься Safari iOS.

Как создать favicon самостоятельно онлайн

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

Популярные платформы для создания фавиконок выглядят следующим образом:

  • Logaster;
  • Favicon.cc;
  • FaviconGenerator.com;
  • DeGraeve.com;
  • Realfavicongenerator.net.

И это не полный список площадок, на которых можно дать волю своей фантазии и воплотить в жизнь дизайн логотипа или ярлыка.

Заключение

Продумывая дизайн сайта, обязательно нужно уделить внимание такому небольшому его элементу, как favicon. Это неотъемлемая часть по-настоящему привлекательного интерфейса сильного сайта.
Хоть прямого влияния иконок на SEO продвижение нет, веб-ресурс с таким приложением однозначно лучше продвигается в рейтинге.
Разобравшись с тем, как правильно сделать фавикон, владельцы сайтов могут презентовать свой ресурс на совершенно новом уровне.

часто задаваемые

вопросы

00 01 / 04
Что такое фавикон?
Favicon или фавикон — это маленькое изображение перед названием страницы, что отражает основную суть сайта или дублирует логотип бренда.Этот графический элемент используется для повышения удобства работы с сайтом как владельцев и веб-мастеров, так и обычных пользователей. Важную роль значок играет и для брендирования бизнеса.
00 02 / 04
Как сделать фавикон для сайта?
Загрузить графическую картинку на свой веб-ресурс можно не во всех форматах. Разные браузеры запрограммированы на сохранение картинок только одного формата, а некоторые из них, хоть и могут читать другие расширения, отдают предпочтение определенному типу файлов.Разберём некоторые из них:ico — традиционное расширение ярлыков для браузеров, но может не поддерживаться на некоторых устройствах, поскольку считается устаревшим;png — формат, пришедший на замену предыдущему, во многих случаях является оптимальным вариантом;jpg — поддерживается не во всех браузерах, не самый хороший вариант;bmp — формат файлов, которые воспринимают и Opera, и Chrome, и FireFox.svg — современное расширение, которое даёт больше возможностей для хранения данных, но ещё не адаптировано под все устройства;gif — редко используемые из-за плохого качества.Разработчики прикладных программных обеспечений кроме форматов на favicon устанавливают и ограничения по их габаритам.Требования разработчиков по размерам иконок в пикселях выглядят следующим образом:16х16 – отображается на большинстве устройств, мониторов и браузеров;32х32 – используется только для IE и Safari;57х57 – подходит для дисплеев iPhone;72х72 – стандартное значение для iPad;114х114 – предназначены для ЖК и OLED дисплеев (Retina) продукции старше 2010 года;144х144 – для экранов Retina на iPad.
00 03 / 04
Как создать favicon самостоятельно онлайн
Популярные платформы для создания фавиконок выглядят следующим образом:Logaster;Favicon.cc;FaviconGenerator.com;DeGraeve.com;Realfavicongenerator.net.
00 04 / 04
Стоит ли использовать фавикон для сайта, чтобы улучшить SEO
Мы уже сказали о том, что миниатюрные изображения сайта являются важными элементами брендирования и улучшения юзабилити. Но даже оценив все указанные достоинства их применения, открытым остаётся вопрос с SEO: зачем нужен фавикон для продвижения?Правда: этот элемент почти никак не сказывается на результатах оптимизации веб-ресурса. А ещё правда в том, что у значков есть косвенная польза.Убедиться в этом можно сравнив метрики двух сайтов: с графическим ярлыком и без него. Кликабельность первого гораздо выше второго, это факт. И этот показатель, как не странно, влияет на позицию сайта в выдаче. Робот определяет на первые позиции более конкурентные и популярные страницы, каковыми и являются веб-ресурсы с настроенными фавиконками.
Больше интересных записей:
Остаться в живых во время корона-кризиса или как выйти в онлайн за 3 дня
10.04.2020
14667 просмотров
Остаться в живых во время корона-кризиса или как выйти в онлайн за 3 дня
Смотреть
Что год грядущий нам готовит? Веб-сайты 2019: прогнозы, тренды, ожидания
09.11.2018
2809 просмотров
Что год грядущий нам готовит? Веб-сайты 2019: прогнозы, тренды, ожидания
Смотреть
Как попасть в ТОП за 24 часа?
01.02.2020
12133 просмотров
Как попасть в ТОП за 24 часа?
Смотреть

Оставьте заявку и получите
лучшее решение для Вашего бизнеса

наши

контакты