Що таке favicon (іконка сайту) та як її додати

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

 

 

Що таке фавікон (favicon)

Favicon (дослівний термін улюблена ікона) – це маленька картинка, яка використовується браузерами для брендування вашого сайту/компанії. Якщо favicon встановлений на вашому сайті правильно, браузери будуть використовувати його в міру необхідності в різних місцях. Сюди відносяться вкладки браузера (поруч із заголовком сторінки), адресні рядки (поруч з URL-адресою), закладки і так далі.

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

Нижче приклад файлу-іконки favicon, який використовується на нашому сайті:

 

 

Важливість favicon

Фавікона (або значок сайту) схожа на логотип компанії в тому сенсі, що вона може грати невелику, але важливу роль для брендування вашого сайту. Сайт, на якому відсутній значок, може здатися таким, що менше заслуговує на довіру користувачів (оскільки ми всі звикли його бачити). З іншого боку, сайт, на якому є цей значок, надасть користувачеві чітке візуальне уявлення про сайт. Подумайте про це, адже одна картинка (навіть невелика) вартує тисячі слів.

 

 

Формат файлу favicon

Є кілька допустимих форматів зображень для значків favicon, але два найпопулярніших – це ico і png. Ці формати мають найбільшу підтримку браузерами і підтримують прозорий фон для значка (на відміну від jpg).

 

Формат ICO

Традиційно іконки створюються у вигляді файлу ICO (favicon.ico). Файл ICO дозволяє зберігати кілька зображень різних розмірів в одному файлі, що дозволяє браузеру (на ПК і в мобільних) вибирати необхідний розмір з доступних зображень. Проблема з форматом ico полягає в тому, що не всі люди знають, що це таке або як його створити. Ви можете створювати файли ICO в фоторедакторі, такому як Gimp або Фотошоп, але найпростішим способом буде використання онлайн-генератора значків, який робить цей процес дійсно простим. У мережі Інтернет ви зможете знайти достатню кількість таких онлайн-генераторів.

 

 

Формат PNG

Починаючи з HTML5, формат PNG є прийнятним форматом для значків сайтів, і на сьогодні всі основні браузери підтримують його. Можливо, це буде найкращим варіантом в майбутньому, оскільки формат png має більш широку популярність в мережі. Однак, оскільки всі браузери (навіть старі) підтримують ICO, краще використовувати версії і png, і ico, щоб уникнути небажаних 404-х помилок.

 

 

Розмір файлу favicon

Вашому сайту необхідно мати кілька розмірів зображень фавіконки, щоб оптимально відображати їх в різних випадках:

• 16x16px, 32x32px – стандартні розміри favicon.
• 180x180px – значок для iOS.
• 192x192px – значок для Android / Chrome.
• 270x270px – значок для плитки середнього розміру в Windows.

 

 

Іменування та місце розташування файлу favicon

Можливо, ви пам’ятаєте дні, коли фавікон повинен був мати тільки одне, точне ім’я файлу, — favicon.ico. І він повинен був розташовуватися тільки в кореневому каталозі вашого сайту. Але, часи змінилися. Тепер ви можете назвати цей файл як завгодно, зберігати його в інших форматах і в будь-якому місці на вашому сайті.

Примітка: Розміщення favicon.ico в кореневій папці все ще є хорошою ідеєю в якості запасного варіанту.

 

 

Як додати значок favicon на свій сайт

Якщо ви вже створили цей файл (або файли), вам залишилося пройти тільки два кроки.

Крок №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. Якщо у вас є якісь питання по даній темі, не соромтеся задавати їх в розділі коментарів нижче.

Дякуємо, що читаєте нас!