Кожен сайт повинен мати свій значок або іконку (favicon). Незважаючи на те, що вони невеликого розміру, фавіконки мають великий вплив – вони використовуються браузерами при візуалізації вашого сайту (або бренду). Фавікона використовується не тільки для відображення значка сайту на вкладці браузера, вона також може бути використана для закладок і в плитці останніх відвіданих сайтів. Із сьогоднішньої статті ви дізнаєтеся вичерпну інформацію про favicon: що це таке, навіщо потрібно, як створити та як розмістити на своєму сайті.
Favicon (дослівний термін улюблена ікона) – це маленька картинка, яка використовується браузерами для брендування вашого сайту/компанії. Якщо favicon встановлений на вашому сайті правильно, браузери будуть використовувати його в міру необхідності в різних місцях. Сюди відносяться вкладки браузера (поруч із заголовком сторінки), адресні рядки (поруч з URL-адресою), закладки і так далі.
Іноді фавікони називають Значки сайтів, що є корисною характеристикою, яка інформує про те, що цей значок буде використовуватися для представлення вашого сайту в різних випадках.
Нижче приклад файлу-іконки favicon, який використовується на нашому сайті:
Фавікона (або значок сайту) схожа на логотип компанії в тому сенсі, що вона може грати невелику, але важливу роль для брендування вашого сайту. Сайт, на якому відсутній значок, може здатися таким, що менше заслуговує на довіру користувачів (оскільки ми всі звикли його бачити). З іншого боку, сайт, на якому є цей значок, надасть користувачеві чітке візуальне уявлення про сайт. Подумайте про це, адже одна картинка (навіть невелика) вартує тисячі слів.
Є кілька допустимих форматів зображень для значків favicon, але два найпопулярніших – це ico
і png
. Ці формати мають найбільшу підтримку браузерами і підтримують прозорий фон для значка (на відміну від jpg
).
Традиційно іконки створюються у вигляді файлу ICO (favicon.ico
). Файл ICO дозволяє зберігати кілька зображень різних розмірів в одному файлі, що дозволяє браузеру (на ПК і в мобільних) вибирати необхідний розмір з доступних зображень. Проблема з форматом ico полягає в тому, що не всі люди знають, що це таке або як його створити. Ви можете створювати файли ICO в фоторедакторі, такому як Gimp або Фотошоп, але найпростішим способом буде використання онлайн-генератора значків, який робить цей процес дійсно простим. У мережі Інтернет ви зможете знайти достатню кількість таких онлайн-генераторів.
Починаючи з HTML5, формат PNG є прийнятним форматом для значків сайтів, і на сьогодні всі основні браузери підтримують його. Можливо, це буде найкращим варіантом в майбутньому, оскільки формат png
має більш широку популярність в мережі. Однак, оскільки всі браузери (навіть старі) підтримують ICO, краще використовувати версії і png
, і ico
, щоб уникнути небажаних 404-х помилок.
Вашому сайту необхідно мати кілька розмірів зображень фавіконки, щоб оптимально відображати їх в різних випадках:
Можливо, ви пам’ятаєте дні, коли фавікон повинен був мати тільки одне, точне ім’я файлу, — favicon.ico
. І він повинен був розташовуватися тільки в кореневому каталозі вашого сайту. Але, часи змінилися. Тепер ви можете назвати цей файл як завгодно, зберігати його в інших форматах і в будь-якому місці на вашому сайті.
Примітка: Розміщення favicon.ico
в кореневій папці все ще є хорошою ідеєю в якості запасного варіанту.
Якщо ви вже створили цей файл (або файли), вам залишилося пройти тільки два кроки.
Крок №1: завантаження файлу favicon на сервер хостингу
По-перше, вам потрібно завантажити файл favicon.ico на сервер, на якому розміщений ваш веб-сайт (використовуючи, наприклад, FTP-клієнт або ж панель управління хостингом). Як ми вже згадували раніше, це може бути кореневий каталог сайту, або ж інша папка. Головне пізніше вказати правильне посилання на розташування файлу.
Крок №2: додавання коду з тегом інформації про файл favicon
По-друге, вам потрібно розмістити тег підключення favicon в шапці сайту (в секції <head>
). Нижче наведені приклади тегів для файлів favicon
, ви можете використовувати їх всі, якщо у вас є кілька розмірів цього файлу:
<head> …….. <link rel="apple-touch-icon" sizes="180x180" href="{ВАШ_ДОМЕН}/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="{ВАШ_ДОМЕН}/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="{ВАШ_ДОМЕН}/favicon-16x16.png"> <link rel="icon" type="image/x-icon" href="{ВАШ_ДОМЕН}/favicon.ico"> …….. </head>
Додайте цей код у вихідний код вашого сайту, тільки не забудьте замінити {ВАШ_ДОМЕН}
на адресу свого сайту. Також, не забудьте про правильне розташування та іменування ваших файлів favicon.
З сьогоднішнього уроку ви дізналися кілька основних моментів про додавання значків favicon
на свій сайт. Ми сподіваємося, що дана інформація допоможе вам прояснити деякі речі про значки сайту (іконки сайту) favicon. Якщо у вас є якісь питання по даній темі, не соромтеся задавати їх в розділі коментарів нижче.
Дякуємо, що читаєте нас!
Якщо хочеш пізнати людину, не слухай, що про неї говорять інші, послухай, що вона говорить…
Вибачення — не означає, що ти не правий, а інша людина має рацію. Це всього…
Атмосферу паперової книги, запах свіжого чорнила і паперу, що трохи залежався, складно замінити гаджетами. Але…