Що таке фавікон і як зробити його з логотипа (2026)

Фавікон — це крихітна іконка, що представляє ваш сайт у вкладці браузера, закладці чи на домашньому екрані телефона. Зробіть його із символу свого логотипа, спростіть, щоб він читався в 16–32 пікселях, і поставте мінімальний набір на 2026 рік: SVG, запасний ICO та apple-touch-icon 180×180.

Автор LogoSagaОпубліковано
На цій сторінці
  1. Що таке фавікон?
  2. Чому фавікон важливий?
  3. Розміри й формати фавікона, які вам потрібні
  4. Як зробити фавікон з логотипа
  5. Підключення фавікона у вашому HTML
  6. Бонус: фавікон, що адаптується до темного режиму
  7. Тестування фавікона
Той самий знак показаний у розмірах фавікона, зокрема версія розміру вкладки браузера.
Фавікон — це знак вашого логотипа, спрощений, щоб лишатися чітким у крихітних розмірах.

Що таке фавікон?

Фавікон (скорочено від «favorite icon») — це маленьке квадратне зображення, що представляє вебсайт у вкладці браузера, закладці, записі історії та на домашньому екрані телефона. Це майже завжди спрощена версія логотипа бренду — конкретно символ, бо на повну назву в тому розмірі немає місця.

Чому фавікон важливий?

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

Розміри й формати фавікона, які вам потрібні

Вам не потрібен десяток іконок, які перелічують старі туторіали. У 2026 році мінімальний, надійний набір малий:

ФайлРозмірПризначення
favicon.svgбудь-якийсучасні браузери; уміє темний режим
favicon.ico16 + 32запасний (старіші браузери)
apple-touch-icon.png180×180домашній екран iOS
PWA-іконки (за бажанням)192, 512встановлювані вебзастосунки

Розміри на кшталт 64×64, 96×96 і 128×128, які рекомендують старіші гіди, застаріли — пропустіть їх. .ico — це запасний, а не головний файл: браузери з підтримкою SVG віддадуть перевагу йому.

Як зробити фавікон з логотипа

  1. Почніть зі знака, а не з повного логотипа — назва не прочитається в розмірі вкладки.
  2. Спростіть для крихітних розмірів. Приберіть тонкі деталі, тонкі лінії й ледь помітні градієнти, що зникають у 16–32 пікселях. Віддавайте перевагу сміливим формам і високому контрасту.
  3. Тримайте квадратним із невеликим відступом, щоб він не тіснився об краї вкладки.
  4. Експортуйте набір — SVG, ICO та PNG 180×180 — з векторного майстра свого логотипа.
Крок експорту в редакторі LogoSaga, де favicon.svg включений разом із файлами логотипа.
Експорт з векторного майстра дає фавікон, що точно збігається з логотипом.

Оскільки SVG — ідеальний майстер-формат, варто розібратися в SVG проти PNG для логотипів, перш ніж експортувати.

Підключення фавікона у вашому HTML

Вкажіть на файли з <head> ваших сторінок. Сучасний, мінімальний набір виглядає так:

<link rel="icon" href="/favicon.ico" sizes="32x32" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

Браузери з підтримкою SVG використовують його; решта відкочується до ICO.

Бонус: фавікон, що адаптується до темного режиму

SVG-фавікон може нести власне оформлення для темного режиму. Вбудуйте медіазапит усередину SVG, щоб знак перемикав кольори разом із темою браузера:

<style>
  path {
    fill: #18231d;
  }
  @media (prefers-color-scheme: dark) {
    path {
      fill: #eef1ea;
    }
  }
</style>

Chrome, Firefox і Edge це шанують; Safari поки що ні, тож як запасний варіант оберіть кольори, що лишаються читабельними на обох темах.

Тестування фавікона

Перевірте його в реальній вкладці браузера, у світлій і темній, та на домашньому екрані телефона. Оскільки браузери жорстко кешують фавікони, після будь-якої зміни зробіть жорстке оновлення — або скиньте кеш, перейменувавши файл чи додавши ?v=2. Якщо він виглядає каламутним у розмірі вкладки, спростіть знак далі: фавікон — це чесний тест того, наскільки добре логотип зменшується.

Якщо ви створюєте логотип у LogoSaga, експорт уже містить favicon.svg поруч зі SVG і PNG логотипа, тож фавікон завжди точно збігається зі знаком.

Створіть логотип із відповідним фавіконом

Поширені запитання

Якого розміру має бути фавікон?

Надайте масштабований SVG плюс растрові розміри PNG: 32×32 — сучасний стандарт для вкладок, 16×16 — класичний малий розмір, а 180×180 — Apple touch icon. PWA також потребують 192×192 і 512×512.

Якого формату має бути фавікон — SVG, PNG чи ICO?

Використовуйте SVG для сучасних браузерів, ICO як запасний для старих і PNG для apple-touch-icon та розмірів PWA. SVG масштабований і навіть може адаптуватися до темного режиму; ICO покриває старіші браузери.

Чи може фавікон змінюватися в темному режимі?

Так, із SVG-фавіконом. Вбудуйте всередину SVG медіазапит prefers-color-scheme, щоб задати світлі й темні кольори. Safari поки що його не шанує, тож оберіть нейтральний колір, що читається на обох.

Чому мій фавікон не показується чи не оновлюється?

Браузери агресивно кешують фавікони. Після зміни зробіть жорстке оновлення або скиньте кеш, перейменувавши файл чи додавши рядок запиту на кшталт favicon.svg?v=2, і переконайтеся, що теги link у head сторінки правильні.

Джерела