Розміри фавіконок у 2026 — єдині файли, які вам потрібні

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

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

Цей гайд розбирає точно те, які розміри фавіконок мають значення сьогодні, для чого використовується кожен, і як згенерувати їх без здогадок.

Чому вимоги до фавіконок ускладнились

На ранньому вебі одного файлу .ico розміром 16x16 пікселів було достатньо. Коли з’явились телефони, планшети й функції закладок у стилі застосунків, браузери й операційні системи почали кожен вимагати свій власний бажаний розмір і формат — більшу іконку для головних екранів iOS, іншу для ярликів у стилі застосунків Android, ще одну для плиток Windows.

Результатом став розлогий список файлів, який багато туторіалів досі радять генерувати «про всяк випадок». На практиці більшості сайтів сьогодні потрібен лише невеликий, добре обраний набір розмірів, щоб покрити кожен поширений випадок.

Розміри фавіконок, що справді мають значення

Файл	Розмір	Використовується для
`favicon.ico`	16x16, 32x32 (кілька розмірів)	Вкладки браузера, закладки, старіші браузери
`favicon-32x32.png`	32x32	Сучасні вкладки браузера й панелі задач
`favicon-16x16.png`	16x16	Менші контексти UI браузера
`apple-touch-icon.png`	180x180	Іконка головного екрана iOS
`android-chrome-192x192.png`	192x192	Головний екран Android і ярлики застосунків
`android-chrome-512x512.png`	512x512	Заставки Android, більші дисплеї
`site.webmanifest`	—	Посилається на іконки Android для встановлюваних вебзастосунків

Для більшості стандартних сайтів це повний список. Вам не потрібен десяток розмірів плиток Windows чи застарілі формати, якщо ви конкретно не підтримуєте старіші корпоративні середовища чи функції меню «Пуск» на основі плиток Microsoft, що стали набагато менш релевантними.

Проєктування іконки, що переживе зменшення

Фавіконку більшість часу переглядають у крихітному розмірі, тож дизайн має триматись навіть при зменшенні до 16 пікселів у квадраті. Кілька практичних правил:

Тримайте дизайн простим — одна літера, ініціал чи спрощена позначка логотипу працює краще за детальну ілюстрацію.
Використовуйте жирні форми й сильний контраст, оскільки дрібні деталі зникають при малих розмірах.
Тестуйте іконку і на світлих, і на темних темах браузера, оскільки панелі вкладок і задач різняться.
Почніть з великого, квадратного майстер-зображення (принаймні 512x512) і дозвольте генератору зменшити його, а не проєктуйте окремо для кожного розміру.

Якщо ваш наявний логотип занадто деталізований для читання при 16 пікселях, часто варто створити спрощену версію конкретно для фавіконки, а не запихати повний логотип у крихітний квадрат.

Генерація всіх розмірів одразу

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

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

Куди йдуть файли й як на них посилатись

Файли фавіконок зазвичай живуть у корені вашого сайту (наприклад, yoursite.com/favicon.ico), і більшість посилаються явно в <head> вашого HTML:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32">
<link rel="icon" href="/favicon-16x16.png" type="image/png" sizes="16x16">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Генератори статичних сайтів і платформи CMS інколи обробляють посилання на фавіконки автоматично, коли файли завантажені в правильне місце — перевірте документацію вашої платформи, якщо іконки не з’являються після завантаження.

Фавіконки проти зображень для поширення в соцмережах

Варто відрізняти фавіконку від зображення, що з’являється, коли посиланням діляться в соцмережах. Це два зовсім різні ассети з різними вимогами до розміру. Зображення попереднього перегляду поширення (часто зване зображенням Open Graph) набагато більше й ширше, і генератор зображень для соцмереж Holsha створений спеціально для цього формату, окремо від набору фавіконок, описаного тут. Для ширшого огляду вимірів зображень на платформах дивіться шпаргалку розмірів зображень для соцмереж.

Яке б вихідне зображення ви не використовували, стежте також за розміром файлу — завеликі вихідні зображення сповільнюють процес експорту й непотрібно роздувають папку ассетів вашого сайту. Швидкий перегляд гайду про стиснення зображень для сайту вартий того перед завантаженням будь-якого нового набору іконок чи графіки.

Чому фавіконка інколи не оновлюється

Дивовижно поширене запитання підтримки не «як мені зробити фавіконку», а «чому моя нова фавіконка не з’являється». Браузери агресивно кешують фавіконки, інколи набагато довше, ніж кешують решту сторінки, що означає, що завантаження файлу заміни за тим самим шляхом не завжди примушує негайне оновлення для повторних відвідувачів.

Кілька речей, вартих перевірки, якщо нова фавіконка не з’являється:

Підтвердьте, що нові файли справді перезаписали старі за тими самими шляхами файлів, а не були завантажені кудись новим.
Спробуйте жорстке оновлення чи очистіть кеш браузера конкретно для сайту, а не просто перезавантажте сторінку.
Перевірте розмітку <head> сторінки, щоб підтвердити, що теги <link> все ще вказують на правильні назви файлів, особливо якщо новий експорт використав інші назви файлів, ніж старий набір.
Дайте час — деякі браузери оновлюють кешовану фавіконку лише через встановлений інтервал чи певну кількість відвідувань, тож затримка на день чи більше не незвична.

Тестування фавіконки на різних пристроях

Оскільки фавіконка має працювати в стількох різних контекстах — вкладках десктопного браузера, головних екранах мобільного, списках закладок, історії браузера — варто справді перевірити результат у більш ніж одному місці, а не припускати, що один попередній перегляд репрезентативний. Кілька перевірок, вартих зробити після генерації нового набору:

Де перевірити	На що звертати увагу
Вкладка десктопного браузера	Іконка впізнавана навіть при дуже малому розмірі
Вкладка мобільного браузера	Та сама чіткість, що на десктопі, оскільки мобільні вкладки часто менші
Додати на головний екран (iOS/Android)	apple-touch-icon чи іконка Android з’являється правильно, не загальний заповнювач
Панель закладок	Іконка все ще чітко читається поряд із текстом закладки
Темний режим браузера	Іконка не зникає на темному фоні панелі вкладок

Пропуск цього кроку — те, як сайти отримують фавіконку, що виглядає чудово в браузері на десктопі самого дизайнера, але з’являється як розмитий чи порожній квадрат усюди інде.

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

Чи потрібен мені все ще файл .ico у 2026? Так, для найширшої сумісності браузерів, оскільки деякі старіші чи нестандартні браузери досі шукають його за замовчуванням у корені сайту.

Який формат зображення має бути вихідним файлом? Джерело PNG чи SVG з прозорим фоном дає найчистіші результати, оскільки уникає небажаних білих країв навколо іконки.

Чому моя фавіконка виглядає добре на десктопі, але розмита на головному екрані телефону? Це зазвичай відсутній чи занадто малий apple-touch-icon.png чи іконка Android — телефони використовують інший, більший файл, ніж іконка вкладки.

Як часто варто оновлювати фавіконку? Лише коли змінюється знак бренду. Правильно згенеровані файли фавіконок рідко потребують перегляду.

Підсумок

Сучасний набір фавіконок менший, ніж пропонує більшість гайдів: кілька PNG, один файл .ico і посилання маніфесту покривають браузери, телефони й встановлювані вебзастосунки. Почніть із жирного, спрощеного дизайну іконки, потім дозвольте спеціалізованому інструменту обробити зміну розміру. Безкоштовний генератор фавіконок Holsha створює повний сучасний набір з одного завантаження, тож єдине рішення, що лишається, — сам дизайн.

Про автора

Олександр Гольша керує вебстудією Boroda Expert, створює сайти й тестує ШІ-інструменти для роботи. Більше про мене.