CityHost.UA
Помощь и поддержка

Что такое фавикон сайта и как его установить

18.06.2019
article

Favicon (фавикон) – это маленькая иконка, размером 16x16 пикселей, которая отображается:

  • возле названия закладки в менеджере и панели закладок браузера;
  • возле тайтла во вкладке браузера;
  • возле тайтла в истории посещений браузера;
  • возле УРЛа сайта в адресной строке некоторых браузеров;
  • возле тайтла или УРЛа в результатах выдачи некоторых поисковиков (например, DuckDuckGo, Яндекс.Поиск и Поиск@Mail.Ru).

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

Почему важно добавить фавикон на сайт

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

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

Создавая favicon, который отличается цветом или формой от фавиконов сайтов-конкурентов, вы также сможете с помощью этого элемента легко повысить CTR. Такая иконка будет сразу выделять ваш сайт в выдаче поисковиков (если они отображают ее). И несомненно этот фавикон для сайта привлечет внимание пользователей.

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

Рекомендации по созданию правильного фавикона

  • Используйте размер favicon с умом. Использование логотипа сайта или компании в качестве фавикона – распространенная практика. И если лого нарисовано в минималистском стиле и не включает множество мелких деталей – это правильный подход. Другое дело, если изображение, которое идентифицирует компанию или бренд, содержит крохотные элементы и много цветов. В таком случае при его сжатии до размера 16x16 пикселей, красивый логотип превращается в размазанное пятно. Учитывайте это, создавая favicon.
  • Создавайте иконку для сайта с учетом его айдентики. Используйте фирменные цвета, шрифт и графические элементы, рисуя фавикон. Помните, что это крохотное изображение со временем станет элементом брендинга.
  • Используйте первую букву, сокращенный вариант или аббревиатуру названия бренда или компании. Посмотрите на фавиконы таких «гигантов» веба, как Фейсбук, Википедия, Гугл и Яндекс. Они включают первую букву названия компании, оформленную в фирменном стиле. Рассмотрите этот вариант, создавая фавикон. Особенно, если у вас пока что нет логотипа или вы используете текстовое лого.

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

Как сделать favicon

С принципами создания иконки сайта мы разобрались. И теперь пришло время узнать, как сделать фавикон правильно:

  1. Создайте картинку, которую будете использовать в качестве иконки блога или интернет-магазина. Рекомендуем сделать это с помощью бесплатного ПО GIMP или его коммерческого аналога Adobe Photoshop.
  2. Убедитесь, что размер изображения составляет 16 x 16 точек.
  3. Сохраните иконку, присвоив ей имя favicon.ico.
  4. Залейте фавикон в корневую директорию сайта.

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

< link rel=”shortcut icon” href=”/icons/favicon.png” type=”image/png” >,

где /icons/favicon.png – условный путь к иконке, а image/png – MIME-тип изображения, который вы используете. Список MIME-типов изображений есть в Википедии.

На этом установка фавикона завершена!

Обратите внимание! Если ваш сайт работает под управлением популярного движка, очень вероятно, что добавить фавикон можно непосредственно с админки CMS. Например, чтобы сделать это в WordPress, выберите в Консоли пункт меню Внешний вид > Настроить, далее выберите Свойства сайта и загрузите favicon в блоке Иконка сайта.

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


Понравилась статья? Расскажите о ней друзьям: