Які розміри фавікона потрібні у 2026 році? Ідеальний набір

У 2026 році ідеальний набір фавікона такий: favicon.ico із зображеннями 16, 32 і 48 px, PNG 96x96 (для Google Search), необов’язковий SVG-фавікон, apple-touch-icon.png 180x180, а також PNG 192x192 і 512x512 (плюс maskable 512), оголошені у веб-маніфесті. Плитки Windows і застарілі розміри Apple потрібні, лише якщо вам необхідно підтримувати дуже старі пристрої. Нижче пояснено, чому так, наведено таблицю розмірів, готовий HTML і типові помилки, яких варто уникати.

Раніше ситуація з фавіконами була заплутаною: кожен браузер і операційна система вимагали свій розмір, через що з’являлися горезвісні блоки <head> на 20 рядків. Сьогодні більшість цього вже застаріла. Сучасні браузери масштабують одну якісну іконку, iOS потрібен один розмір, а Android читає маніфест. У цій статті ми відділяємо справді необхідне від того, що просто приємно мати.

Коротка відповідь: ідеальний набір файлів фавікона

• favicon.ico (16, 32, 48 px в одному файлі) у корені сайту. Браузери, рідери стрічок і багато інструментів досі автоматично запитують /favicon.ico.
• favicon.svg (необов’язково, але рекомендовано) для чіткого відображення в будь-якому розмірі та підтримки темного режиму.
• PNG 16x16, 32x32 і 96x96 як явні запасні варіанти. Версія 96 px допомагає Google Search, який вимагає розмір, кратний 48 px.
• apple-touch-icon.png розміром 180x180, непрозорий, без прозорості.
• PNG 192x192 і 512x512 у manifest.json, плюс maskable 512x512 для Android.
• Мета-тег theme-color для підфарбовування інтерфейсу браузера на мобільних.
• Плитки Windows (70, 150, 310 px) з browserconfig.xml — лише для застарілих Windows і закріплених сайтів в IE11.

Таблиця розмірів фавікона: призначення, назви файлів і пріоритет

Використовуйте цю таблицю як чекліст. «Обов’язково» означає, що без цього звичайний сайт виглядатиме зламаним або незавершеним; «Рекомендовано» — помітний приріст якості; «Необов’язково» — нішеве або застаріле використання.

favicon.ico: 16, 32 і 48 px в одному файлі

ICO — це контейнер, який містить кілька растрових зображень. Хороший favicon.ico містить зображення 16x16, 32x32 і 48x48, щоб браузер або ОС могли вибрати найближче за розміром. Розмістіть його в корені домену (https://example.com/favicon.ico). Навіть якщо ваш HTML вказує на інше місце, багато краулерів, RSS-рідерів і старіших браузерів усе одно запитують саме цю адресу, тож наявність файлу позбавить ваші логи зайвих помилок 404.

Не перейменовуйте PNG просто на .ico. Більшість браузерів це терплять, але деякі інструменти відхиляють такий файл, а ви втрачаєте перевагу кількох роздільностей. Експортуйте справжній ICO.

PNG-фавікони: 16, 32 і 96 px

PNG-посилання з явним атрибутом sizes дають браузеру змогу вибрати найкраще зображення, не розбираючи ICO. На практиці 32x32 покриває вкладки на екранах з високою щільністю, а 16x16 сьогодні майже зайвий. Розмір 96x96 варто додати, адже Google Search показує фавікони поруч з результатами та вимагає квадратну іконку, розмір якої кратний 48 px (48x48, 96x96, 144x144 тощо). Файл 96 px дає Google чіткіше джерело, ніж 48 px, коли той зменшує зображення для мобільних результатів.

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

SVG-фавікон і темний режим

SVG-фавікон — це один крихітний файл, який залишається чітким за будь-якої щільності екрана. Його підтримують браузери на основі Chromium і Firefox. Підтримка в Safari історично була обмеженою, тому ніколи не покладайтеся лише на SVG: залиште запасні варіанти ICO і PNG.

Найбільша перевага — теми. Оскільки SVG може містити CSS, ви можете адаптувати іконку до кольорової схеми користувача за допомогою prefers-color-scheme:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .bg { fill: #0f172a; }
    .fg { fill: #ffffff; }
    @media (prefers-color-scheme: dark) {
      .bg { fill: #ffffff; }
      .fg { fill: #0f172a; }
    }
  </style>
  <rect class="bg" width="32" height="32" rx="6"/>
  <circle class="fg" cx="16" cy="16" r="8"/>
</svg>

Зверніть увагу: медіазапит відображає тему браузера або ОС, яку й використовує панель вкладок. Він не реагує на перемикач теми на вашому власному сайті.

Одна відома особливість: якщо вказано і ICO, і SVG, Chrome може вибрати ICO. Якщо оголосити ICO з sizes="32x32" і вказати SVG після нього, Chrome віддасть перевагу SVG, як показано в коді нижче.

Apple touch icon: 180x180 і застарілі розміри

Коли користувач додає ваш сайт на головний екран iOS або iPadOS, Safari використовує apple-touch-icon. Сьогодні достатньо одного PNG розміром 180x180 px: iOS зменшує його для старіших пристроїв та iPad. Назвіть його apple-touch-icon.png і покладіть у корінь; iOS навіть шукає цей файл за замовчуванням, якщо тега link немає.

Правила для іконки Apple:

• Без прозорості. iOS заповнює прозорі пікселі чорним, тому прозорий логотип часто перетворюється на чорну пляму. Додайте суцільний колір фону.
• Без заокруглених кутів. iOS застосовує власну заокруглену маску. Надайте повний квадрат.
• Не розміщуйте важливі елементи біля самих країв, оскільки кути обрізаються.

Коли потрібні застарілі розміри (57, 72, 76, 114, 120, 144, 152, 167)? Лише якщо ви підтримуєте iOS 6 або старіші версії, або хочете точного контролю пікселів для iPad Pro (167 px) та iPad (152 px). Майже для кожного сайту у 2026 році достатньо одного файлу 180x180. Налаштування для максимальної сумісності нижче містить кілька з них для повноти.

Іконки Android і PWA: 192, 512 та maskable

Chrome на Android та інші браузери з підтримкою PWA читають іконки з веб-маніфесту, а не з <link rel="icon">. Для можливості встановлення потрібні щонайменше PNG 192x192 і 512x512. Іконка 192 px використовується на головному екрані та в меню застосунків; іконка 512 px з’являється на заставках і в діалогах встановлення.

Maskable-іконки та безпечна зона

Адаптивні іконки Android можуть обрізатися до кола, сквірклу чи іншої форми залежно від пристрою. Maskable-іконка спроєктована так, щоб її можна було безпечно обрізати: важливий вміст має міститися всередині безпечної зони — центрованого кола діаметром 80% від розміру зображення (радіус дорівнює 40% сторони). Для файлу 512x512 це означає, що логотип має вміщуватися в коло діаметром приблизно 410 px, а колір фону слід розтягнути до всіх чотирьох країв, щоб після маскування не було прогалин.

Оголосіть maskable-іконку окремим записом з "purpose": "maskable". Уникайте "any maskable" для одного файлу: відступи, потрібні для маскування, виглядають надто малими, коли іконку показано без маски.

Приклад manifest.json

{
  "name": "Example App",
  "short_name": "Example",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0f172a",
  "icons": [
    {
      "src": "/web-app-manifest-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/web-app-manifest-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/maskable-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Віддавайте файл як application/manifest+json (або application/json) і підключайте його на кожній сторінці через <link rel="manifest" href="/manifest.json">. Деякі проєкти називають його site.webmanifest; назва не важлива, важливе саме посилання.

Плитки Windows і browserconfig.xml

Windows 8.1 і 10 дозволяють закріпити сайт у меню «Пуск», а IE11 та старий Edge читають зображення плиток із browserconfig.xml. Звичайні розміри: 70x70 (мала), 150x150 (середня), 310x150 (широка) і 310x310 (велика). Edge на основі Chromium натомість використовує маніфест і звичайні фавікони, тож це застаріла функція. Додавайте її, лише якщо серед вашої аудиторії ще є користувачі старих версій Windows, наприклад у корпоративному середовищі.

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/mstile-70x70.png"/>
      <square150x150logo src="/mstile-150x150.png"/>
      <wide310x150logo src="/mstile-310x150.png"/>
      <square310x310logo src="/mstile-310x310.png"/>
      <TileColor>#0f172a</TileColor>
    </tile>
  </msapplication>
</browserconfig>

theme-color: підфарбовування інтерфейсу браузера

Мета-тег theme-color повідомляє мобільним (і деяким десктопним) браузерам, який колір використовувати для адресного рядка або заголовка вікна. Це не фавікон, але він належить до того самого набору брендингу. Можна задати окремі значення для світлого й темного режимів:

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

Мінімальне сучасне налаштування чи максимальна сумісність

Мінімальне сучасне налаштування (рекомендовано для більшості сайтів)

П’ять файлів покривають понад 99% реальних випадків: favicon.ico, favicon.svg, apple-touch-icon.png (180x180) та дві іконки маніфесту (192 і 512). Додайте PNG 96x96, якщо важлива видимість у Google Search, і maskable-іконку, якщо ви випускаєте PWA.

<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">
<link rel="manifest" href="/manifest.json">

Налаштування для максимальної сумісності

Обирайте його, якщо ваша аудиторія широка або корпоративна, або якщо хочете охопити всі можливі клієнти. Воно додає явні розміри PNG, застарілі розміри Apple, плитки Windows і кольори теми.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Classic and modern browser icons -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">

  <!-- Apple -->
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">

  <!-- Android / PWA -->
  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

  <!-- Windows (legacy) -->
  <meta name="msapplication-config" content="/browserconfig.xml">
  <meta name="msapplication-TileColor" content="#0f172a">

  <title>Example</title>
</head>

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

Типові помилки з фавіконами та як їх виправити

1. Неправильні шляхи

Посилання на кшталт href="favicon.ico" обчислюється відносно поточної URL-адреси, тому працює на /, але ламається на /blog/post/. Використовуйте кореневі відносні (/favicon.ico) або абсолютні URL. Також переконайтеся, що файли справді існують: відкрийте кожну адресу безпосередньо в браузері й перевірте, що вона повертає HTTP 200, а не перенаправлення на сторінку 404 чи сторінку входу.

2. Відсутній або неправильний атрибут sizes

Без sizes браузери змушені завантажувати іконки, щоб їх перевірити, і можуть обрати не ту. Завжди вказуйте sizes для PNG-посилань і стежте, щоб він збігався з реальними розмірами в пікселях. Файл із позначкою 32x32, який насправді 64x64, спричиняє непослідовні результати.

3. Агресивне кешування

Браузери кешують фавікони надовго, часто незалежно від кешу сторінки. Після ребрендингу стара іконка може відображатися ще кілька днів. Змініть назву файлу або додайте рядок запиту з версією (/favicon.ico?v=2) та оновіть теги link. Жорстке перезавантаження часто не оновлює іконку вкладки; зазвичай допомагає відкрити URL іконки безпосередньо й перезавантажити її.

4. Неквадратні зображення

Фавікони мають бути квадратними. Прямокутний логотип розтягується, обрізається або отримує поля непередбачуваним чином. Створіть окремий квадратний знак, наприклад ініціал чи символ, замість зменшення широкого логотипу з назвою.

5. Прозорі Apple touch icon, що стають чорними

iOS заповнює прозорість чорним. Зробіть для іконки 180x180 непрозорий фон і не заокруглюйте кути заздалегідь.

6. Maskable-іконки без безпечної зони

Якщо логотип торкається країв maskable-іконки, Android його обріже. Тримайте його всередині центрального кола 80% і заповніть усе полотно кольором фону.

7. Блокування іконок для краулерів

Якщо robots.txt забороняє шлях до вашого фавікона, Google не зможе його отримати та показуватиме в результатах пошуку універсальну іконку глобуса. Також пам’ятайте, що Google потрібен фавікон на тому самому хості, що й сторінка, і він оновлює його лише час від часу, тож зміни можуть з’явитися через дні чи тижні.

8. Забуте посилання на маніфест або purpose

Маніфест, який не підключено або в якому немає іконок 192 і 512 px, не дозволяє показати запит на встановлення в Chrome. Перевірте його в інструментах розробника браузера на вкладці Application.

Згенеруйте весь набір одним кліком

Створювати десяток файлів вручну в графічному редакторі, потім конвертувати в ICO і писати маніфест — стомливо та схильно до помилок. MakeFav генерує всі наведені вище файли з одного зображення, тексту чи емодзі: багаторозмірний favicon.ico, PNG, SVG, Apple touch icon, PNG 192/512, maskable-іконку, плитки Windows, manifest.json і browserconfig.xml, а також готовий HTML-фрагмент для вставлення — усе в одному ZIP-архіві. Ви можете точно налаштувати фон, відступи та форму в редакторі, перевірити наявний сайт за допомогою перевірки фавікона і автоматизувати генерацію через ресурси для розробників.

Чекліст розгортання

1. Завантажте всі файли в корінь вашого сайту.
2. Вставте HTML-фрагмент у <head> кожної сторінки (або спільного шаблону).
3. Переконайтеся, що шляхи кореневі відносні та повертають HTTP 200.
4. Перевірте світлий і темний режими, встановлення на головний екран iOS та встановлення на Android.
5. Запустіть перевірку, щоб виявити відсутні або неузгоджені розміри.
6. Скиньте кеш за допомогою рядка версії, якщо ви замінили стару іконку.

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

Чи потрібен favicon.ico у 2026 році?

Так. Хоча сучасні браузери приймають PNG і SVG, багато краулерів, рідерів стрічок, поштових клієнтів і старіших браузерів досі напряму запитують /favicon.ico. Багаторозмірний ICO із зображеннями 16, 32 і 48 px — це невеликий файл, який запобігає відсутнім іконкам і помилкам 404.

Якого розміру має бути фавікон для Google Search?

Google вимагає квадратний фавікон, розмір якого кратний 48 px, щонайменше 48x48. PNG 96x96 — безпечний вибір, також підтримується SVG. Крім того, файл має бути доступним для сканування, тому не блокуйте його в robots.txt. Оновлення можуть з’являтися кілька днів або тижнів.

Чи достатньо 180x180 для Apple touch icon?

Майже для всіх сайтів — так. iOS та iPadOS зменшують PNG 180x180 для кожного поточного пристрою. Старіші розміри (від 57 до 152 px) важливі лише для дуже старих версій iOS. Не забудьте використати непрозорий фон, щоб іконка не стала чорною.

Що таке maskable-іконка і чи потрібна вона мені?

Maskable-іконка — це PNG 512x512, розроблений для адаптивних форм іконок Android. Її важливий вміст розташований усередині кола діаметром 80% у центрі, а фон заповнює весь квадрат. Вона потрібна лише якщо ви пропонуєте PWA з можливістю встановлення, але завдяки їй іконка виглядає рідною, а не розміщується в білому колі.

Чому моя стара іконка досі відображається після заміни?

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