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

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

 13065
18.06.2019
article

 

 

Favicon — это маленькая иконка размером 16x16 пикселей, которая отображается во вкладках браузера, панели закладок, истории просмотров, а также в результатах поиска Google, Bing и других поисковых систем. Главная задача фавикона — ускорить поиск нужного сайта среди множества открытых вкладок браузера и в его закладках. Уделив время его созданию, вы сможете усилить узнаваемость бренда и повысить доверие к веб-ресурсу в глазах пользователей.

Купить дешевый хостинг для сайта с мгновенной регистрацией

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

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

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

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

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

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

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

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

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

Как сделать favicon для сайта

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

  1. Создайте картинку, которую будете использовать в качестве иконки блога или интернет-магазина. Рекомендуем сделать это с помощью бесплатного программного обеспечения GIMP или его коммерческого аналога Adobe Photoshop.
  2. Убедитесь, что размер изображения составляет 16x16 точек.
  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 в блоке «Иконка сайта».


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


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

Автор: Богдана Гайворонская

Журналист (с 2003 года), IT-копирайтер (с 2013 года), контент-маркетолог Cityhost.ua. Специализируется на статьях о технологиях, создании и продвижении сайтов.