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

Favicon (фавікон) — це маленька іконка, розміром 16x16 пікселів, яка відображається:

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

Головне завдання favicon — прискорити пошук потрібного сайту серед безлічі відкритих вкладок браузера і в його закладках.

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

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

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

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

Зверніть увагу! Іконка — важливий, але не єдиний чинник підвищення CTR. На показники цієї характеристики у величезній мірі впливає коректність складання тайтла й дескрипшна. Для успішного просування важливо також розуміти, як правильно складається карта сайту, знати, як усунути дублі сторінок і як виконати коректну перелінковку.

Рекомендації щодо створення правильного фавікона

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

Зверніть увагу! Як фавікон можна використовувати не тільки букви з назви компанії, але і з доменного імені (якщо воно відрізняється від імені бренду або торгової марки). Зареєструвати домен у міжнародній, регіональній або тематичній зоні за низькою ціною можна в нас.

Як зробити 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 в блоці Іконка сайту.

Тільки що ви дізналися, що таке фавікон, чому він важливий і як правильно його створити. З цими знаннями ви швидко намалюєте іконку сайту, що легко запам'ятовується, яка з часом стане не менш потужним елементом брендингу, ніж лого й палітра кольорів онлайн-ресурсу.

Публікація була пізнавальною? Тоді поділіться нею в соціальних мережах і додавайтеся в наш Telegram канал. Нагадаємо, що купити український хостинг ви можете у хостинг-компанія CityHost. З технічних питань звертайтесь до онлайн чату або по телефону ☎️ 0 800 219 220.

Сподобалася стаття? Розкажіть про неї друзям: