Іконка сайту в адресному рядку браузера може підвищити впізнаваність вашого сайту та зробити його професійнішим. Проста іконка у форматі .ico або .png може чітко повідомляти користувачам, що вони знаходяться на вашому веб-сайті, навіть якщо у них відкрито кілька вкладок. Однак, додавання іконки сайту в Chrome вимагає кількох кроків, але вони досить прості у виконанні.
Перш за все необхідно створити іконку сайту, яка буде використовуватися в браузері Chrome. Іконка повинна мати розміри 16×16 пікселів для лівої частини адресного рядка та 48×48 пікселів для ярлика на панелі закладок.
Після створення іконки, необхідно додати посилання на неї в розділі <head> вашого HTML-документа. Для цього використовується наступний код:
<link rel=”icon” type=”image/png” href=”путь_к_иконке”>
Замість "шлях_іконці" потрібно вказати відносний шлях до файлу вашої іконки. Зверніть увагу, що якщо ви використовуєте .ico-файл, то тип зображення має бути "image/x-icon".
Після того, як ви додали посилання на іконку у ваш HTML-документ, перезавантажте ваш сайт і іконка має з'явитися в адресному рядку та на панелі закладок у браузері Chrome.
| Як додати іконку сайту у хромі? |
|---|
| 1. Підготуйте зображення іконки сайту у форматі .png. |
| 2. Створіть файл з ім'ям favicon.ico і збережіть його в кореневий каталог вашого сайту. |
3. Вставте наступний код у розділ вашого сайту:<link rel="icon" href="favicon.ico" type="image/x-icon"> |
| 4. Збережіть зміни та завантажте оновлені файли на сервер вашого сайту. |
| 5. Очистіть кеш браузера та перезавантажте сторінку сайту. Тепер іконка сайту має відображатися у вкладці браузера та при збереженні на робочий стіл. |
Щоб додати іконку сайту на вкладці, потрібно використовувати тег <link> зі значенням атрибуту rel рівним "shortcut icon" і атрибут href, що вказує на шлях до зображення. У цьому прикладі ми додаємо іконку за допомогою "path/to/icon. png".
Це робиться через тег <link>, як показано нижче. Атрибут href задає розташування та ім'я файлу. Формат малюнка не обов'язково має бути ICO, також допускається використання GIF та PNG. При цьому необхідно змінити значення атрибуту type на image/gif або image/png залежно від типу зображення.
ру/favicon. ico та кілька разів виконати комбінацію клавіш CTRL+F5. В результаті ви в кеші оновите іконку на нову, далі при відкритті головної сторінки сайту просто оновіть її кілька разів, і іконка у вкладці має оновитися на нову.