Favicon.ico — це файл-іконка, яку браузер відображає поруч із назвою сайту у вкладках, у закладках та в історії перегляду. Якщо ви хочете зробити свій сайт впізнаваним, варто додати favicon.

Ось покрокова інструкція, як завантажити favicon.ico і підключити його до сайту.

1. Створіть favicon.ico

Є кілька безкоштовних онлайн-сервісів:

  • https://favicon.io
  • https://realfavicongenerator.net
  • https://www.favicon-generator.org

Як це працює:

  1. Завантажте своє зображення (рекомендовано квадратне, 512×512 або 256×256 px).
  2. Сервіс автоматично згенерує файл favicon.ico.
  3. Завантажте архів або окремий файл .ico.

2. Куди зберігати favicon.ico

Збережіть файл favicon.ico у кореневій директорії вашого сайту.

Це дозволяє браузерам автоматично знаходити його за адресою:

https://ваш_сайт.com/favicon.ico

3. Як підключити favicon.ico на сайті

У файлі index.html (або в <head> шаблону сайту) додайте цей рядок:

<linkrel=”icon”href=”/favicon.ico”type=”image/x-icon”>

Або для кращої сумісності:

<linkrel=”shortcut icon”href=”/favicon.ico”type=”image/x-icon”>

4. Перевірте, чи працює

  1. Очистіть кеш браузера (або відкрийте сайт в режимі інкогніто).
  2. Зайдіть на сайт — favicon має з’явитись у вкладці.
  3. Якщо не видно — перевірте, чи збережено файл у правильному місці, і чи правильно прописано шлях у HTML.

Поради

  • Файл .ico може містити одразу кілька розмірів (16×16, 32×32 тощо).
  • Якщо ваш сайт підтримує PWA або мобільні іконки — краще згенерувати повний набір фавіконів через RealFaviconGenerator.