Стаття

Створення favicon із PNG

Favicon, це невелика графіка, яку браузери відображають у вкладках, закладках та списках історії. Правильно виконати це означає більше, ніж просто змінити розмір логотипу: формат .ico пакує кілька роздільностей в один файл, сучасні браузери надають перевагу PNG, мобільні пристрої мають власний apple-touch-icon, а маніфести вебзастосунків потребують власного набору іконок. Ця стаття охоплює кожну частину та пояснює, як отримати весь набір з одного вихідного PNG.

Автор: Bastien Sulyan · Опубліковано: 29 червня 2026 р.

Що таке favicon і де браузери його використовують

Слово favicon є скороченням від "favorite icon". Браузери вперше відображали його в адресному рядку в Internet Explorer 5 (1999), потім прийняли для закладок. Сьогодні він з'являється у вкладках браузера, на панелі закладок, в історії перегляду, на сторінці нової вкладки в деяких браузерах та на панелях завдань операційної системи, коли сайт закріплений. На мобільних пристроях, якщо користувач додає сайт на головний екран, пристрій використовує пов'язане, але окреме зображення, зване apple-touch-icon, а не стандартний favicon. Пошукові системи іноді відображають favicon поруч із результатами в своєму інтерфейсі. Графіка невелика за задумом, що робить її ефективною для швидкої візуальної ідентифікації, але також вимагає ретельного виконання: при 16x16 пікселях детальний логотип перетворюється на нечітку пляму. Сам файл favicon пройшов через кілька форматів за десятиліття, при цьому .ico залишається найбільш широко сумісним, а PNG є сучасним вибором за замовчуванням для більшості браузерів.

Контейнер .ico: кілька роздільностей в одному файлі

Формат .ico є контейнером, а не одним зображенням. Один файл .ico може містити кілька растрових зображень різних роздільностей, кожне з яких зберігається як окремий запис в індексі на початку файлу. Три найпоширеніших розміри: 16x16, 32x32 та 48x48 пікселів. Коли Windows відображає favicon у Провіднику або на панелі завдань, вона вибирає запис, що найкраще відповідає контексту відображення. Старіші версії Windows потребували запису 48x48 для слотів панелі завдань із високою щільністю. Браузери запитують favicon у розмірі 16x16 для вкладок, але можуть використовувати більший запис, якщо виявлено дисплей із більшою щільністю. Пакування всіх трьох розмірів в один файл .ico означає, що один HTTP-запит охоплює всі випадки використання. Розподіл їх як окремих PNG також є дійсним, але потребує додаткових тегів link і збільшує кількість HTTP-запитів. Внутрішні зображення у файлі .ico є стандартними даними BMP або PNG, тому контейнер додає лише невеликі накладні витрати заголовка для кожного запису.

Дизайн для мініатюрних розмірів: спрощення знаку

При 16x16 пікселях у вас є лише 256 пікселів загалом. Типовий логотип із написом або дрібними деталями стає нечитабельним при такому розмірі. Стандартним підходом є створення спрощеного знаку: одна літера, абстрактна форма або іконка, що представляє бренд без покладання на деталі. Кілька конкретних проблем, що варто передбачити: тонкі штрихи повністю зникають при малих розмірах, особливо на non-retina екранах. Літерні пари та деталі з'їденого простору зливаються у сірий шум. Градієнти майже непомітні. Висока контрастність між знаком та його фоном є єдиним найважливішим фактором читабельності. Суцільна форма на простому фоні майже завжди читається краще, ніж детальна ілюстрація при 16x16. Розміри 32x32 та 48x48 є більш поблажливими і можуть підтримувати трохи більше деталей, але версія 16x16 має розглядатися як обмежувальна умова. Якщо знак все ще не читається при 16x16, дизайн потребує подальшого спрощення.

Сучасний набір: .ico, PNG-іконки, apple-touch-icon, маніфест та теги HTML link

Повне налаштування favicon для публічного сайту наразі потребує п'яти речей. По-перше, favicon.ico у корені сайту (браузери запитують /favicon.ico безпосередньо без тегу link як запасний варіант). По-друге, PNG розміром 32x32 для сучасних настільних браузерів, оголошений тегом link: `<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">`. По-третє, PNG розміром 16x16 для розміру вкладки: `<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">`. По-четверте, apple-touch-icon розміром 180x180 пікселів для закладок головного екрану iOS: `<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">`. По-п'яте, маніфест вебзастосунку (site.webmanifest) з PNG розмірами 192x192 та 512x512 для Android та прогресивних вебзастосунків. Прозорість підтримується в PNG та у PNG-кодованих записах всередині .ico, хоча apple-touch-icon повинен мати непрозорий фон, оскільки iOS ігнорує альфа-канал і заповнює прозорі ділянки чорним кольором.

Локальна робота: favicon-generator зберігає ваше зображення на пристрої

Інструмент favicon-generator на цьому сайті приймає PNG та виводить повний набір: favicon.ico з кількома роздільностями, упакований із записами 16x16, 32x32 та 48x48, окремі розміри PNG для безпосереднього використання з тегами link та apple-touch-icon розміром 180x180. Все це відбувається у вашому браузері за допомогою Canvas API та JavaScript-кодувальника .ico. Ваше вихідне зображення ніколи не завантажується нікуди; воно залишається на вашому пристрої. Це важливо, коли вихідний файл є логотипом компанії або будь-яким активом, що не повинен покидати вашу машину до того, як ви будете контролювати, куди він потрапить. Кожен згенерований файл пропонується як окреме завантаження зі стандартною назвою. Ви копіюєте їх у корінь свого сайту та додаєте відповідні теги link до заголовку вашого HTML. Якщо ваш вихідний логотип має дрібні деталі, що не зберігаються при рендері 16x16, ви можете обрізати або спростити його перед тим, як вставити в генератор, або надати інше вихідне зображення, спеціально підготовлене для favicon.

Інструменти з цієї статті

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

Чи потрібен мені favicon.ico, якщо я оголошую теги link для PNG?

Так, з двох причин. По-перше, браузери, що не читають ваш HTML (вебкравлери, RSS-читачі, деякі старі мобільні браузери), шукають /favicon.ico безпосередньо у корені домену. Якщо цього файлу немає, вони генерують 404-запит при кожному завантаженні сторінки, що додає шум до ваших серверних журналів та невелику непотрібну затримку. По-друге, старіші версії Internet Explorer розпізнають лише формат .ico і ігнорують теги link для PNG. Надання обох варіантів охоплює всі випадки.

Чи можна використовувати SVG як favicon?

Chrome та Firefox підтримують SVG-favicon через `<link rel="icon" type="image/svg+xml" href="/favicon.svg">`. Safari не підтримує SVG-favicon. Оскільки SVG-favicon є незалежними від роздільності, вони виглядають чітко на будь-якій щільності відображення, включаючи retina-екрани, без необхідності у кількох варіантах розмірів. Практична рекомендація полягає в оголошенні тегу link для SVG для браузерів, що підтримують його, і все одно включенні запасного варіанту .ico для повного охоплення. SVG-favicon також можуть містити медіа-запит `prefers-color-scheme` для автоматичного перемикання між світлою та темною версіями.

З якого зображення варто починати для отримання найкращого результату?

Квадратний PNG розміром 512x512 або більше з прозорим фоном дає найбільшу гнучкість. Початок з великого розміру і зменшення зберігає більше деталей, ніж початок з малого зображення. Якщо ваш основний логотип містить напис, розгляньте можливість підготовки окремої спрощеної версії, що показує лише іконку або знак, оскільки текст не буде читабельним при 16x16 незалежно від вихідної роздільності. Висока контрастність між знаком та його фоном є найнадійнішим показником того, чи будуть малі розміри читатися чітко.