Як Додати Favicon для Сайту

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

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

По-друге: використання фавікон робить сайт більш зручним, а значить, допомагає просувати його в пошуковій видачі.

Яким має бути фавікон

Найчастіше для фавікон використовують зображення у форматі ico розміром 16х16 або 32х32. Зараз багато браузерів підтримують інші формати (jpeg, png, svg). Але все ж таки рекомендується використовувати традиційний формат, щоб добитися коректного відображення у всіх браузерах.

Зображення для фавікон використовують різні. Основний принцип: зображення має бути простим і незабутнім. Можна вибрати один з наведених нижче варіантів:

Логотип компанії. Це перше, що, за логікою, має бути на фавіконі. Але його використання не завжди є доречним. Наприклад, якщо логотип складається із дрібних елементів або має складний дизайн.
Відомий елемент бренда. Якщо у фірмовому стилі компанії застосовуються прості, але відомі елементи.
Зображення, яке асоціюється із діяльністю компанії.
Яскраве зображення, що не стосується вашої тематики. Щоб привернути увагу як фавікон можна використовувати будь-яке яскраве зображення, яке виділить вас серед конкурентів.

Встановити фавікон на сайт не складно, процес займає зовсім небагато часу. Існує кілька способів встановлення фавікон на сайт.

Автоматичне додавання фавікону

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

Подготовленные файлы нужно распаковать. Это должно быть квадратное изображение. Существует множество сервисов для конвертирования графических изображений в формат ico.
Підготовлений файл потрібно завантажити та перейменувати на favicon.ico. Це основна умова для того, щоб браузер розпізнав потрібний файл.
Завантажте готовий файл до кореневої папки сайту на хостингу. Для цього знадобиться доступ до FTP клієнта або файлового менеджера. Коли файл буде завантажено. браузери автоматично виводитимуть зображення фавікона.

Додавання фавікону через код

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

Але процес може спростити сервіс http://realfavicongenerator.net/. Щоб отримати набір файлів для фавікона, достатньо завантажити на сервіс свій файл, далі зробити кілька простих кроків:

Сервіс запропонує налаштувати відображення іконки в різних операційних системах. Тут потрібно вибрати колір фону на різних платформах.

Вкажіть, у яких браузерах використовуватиметься фавікон.
Після цього потрібно натиснути кнопку, після чого система генерує набір файлів у форматі zip і код.
Завантажити отриманий архів на свій комп'ютер або хмарне сховище.
Через файловий менеджер або FTP завантажте та розпакуйте архів у корінь сайту.
Код, який ви отримали під час створення файлів, потрібно вставити в тег <head>.

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

Індексація фавікона пошуковими системами

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

Так, для пошукової системи Яндекса може знадобитися кілька місяців, щоб побачити зміни на сайті. Але ви можете вручну перевірити, як пошукачі бачать ваш фавікон. Для цього потрібно ввести рядок браузера наступні url:

Для Google - https://www.google.com/s2/favicons?domain=ваш-домен
Для Яндекса - https://favicon.yandex.net/favicon/ваш-домен

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