CityHost.UA
Допомога і підтримка

Що таке фавікон сайту і як його встановити

 13066
18.06.2019
article

 

 

Favicon — це маленька іконка розміром 16x16 пікселів, яка відображається у вкладках браузера, в панелі закладок, в історії переглядів, а також у результатах пошуку Google, Bing та інших пошукових систем. Головне завдання фавікона — це прискорити пошук потрібного сайту серед безлічі відкритих вкладок браузера та в його закладках. Приділивши час його створенню, ви зможете підсилити впізнаваність бренду та підвищити довіру до веб-ресурсу в очах користувачів.

Купити дешевий хостинг для сайту з миттєвою реєстрацією

Чому важливо додати фавікон на сайт

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

Сайти з фавіконом також швидше знаходяться в закладках або серед відкритих вкладок браузера. Адже замість того, щоб читати назву кожної з них, користувач легко ідентифікує потрібну йому веб-сторінку, лише поглянувши на її іконку.

Створюючи favicon icon, який відрізняється кольором або формою від фавіконів сайтів-конкурентів, ви також зможете за допомогою цього елемента легко підвищити 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. Спеціалізується на статтях про технології, створення та просування сайтів.