Набір іконок сайту, що працює скрізь у 2026 році
Шість розмірів, один .ico, один manifest — все, що вам насправді потрібно, щоб мати favicon, який правильно виглядає в кожному браузері, на iOS домашньому екрані та панелі завдань Windows у 2026 році.
Favicons здаються тривіальними. Як тільки ви розмістите один, з'являється сотня граничних випадків: iOS домашній екран має розмиту іконку, Android вкладка Chrome має неправильний колір, Windows видимі булавки показують розмиту 16×16. Цей посібник розбирає весь шум і охоплює саме те, що вам потрібно у 2026 році — не більше, не менше.
Мінімальний життєспроможний набір
Шість ресурсів охоплюють кожну поверхню, яка буде показувати іконку вашого сайту:
favicon.ico— контейнер багатьох розмірів з 16×16, 32×32, 48×48 всередині (старі браузери, Windows Explorer, закріплені вкладки).favicon-16x16.png,favicon-32x32.png— сучасні вкладки браузера.apple-touch-icon.png(180×180) — iOS домашній екран, Safari список для читання.android-chrome-192x192.png,android-chrome-512x512.png— Android домашній екран, підказки встановлення PWA.site.webmanifest— конфігурація PWA, яка вказує на Android іконки та визначає колір теми.
Це все. Все інше (Safari закріплена вкладка SVG, старі варіанти Apple touch, Windows плиткові зображення) є застарілим. Сучасні браузери з легкістю повертаються до 192 або 512 PNG.
Чому .ico все ще використовується у 2026
Файл .ico — це бінарний контейнер, який може містити кілька PNG зображень різних розмірів. Коли браузер запитує /favicon.ico (що деякі все ще роблять за замовчуванням), він отримує всі три розміри в одному запиті. Рендерер вибирає той, який найкраще підходить для поточної поверхні — 48×48 для Windows Explorer, 16×16 для вкладки браузера.
PNG перейменований на .ico містить лише один розмір. Це переважно працює, оскільки браузери прощають, але Windows Explorer та деякі поштові клієнти будуть або відображати його розмито, або відмовляються показувати його. Розмістіть справжній .ico, якщо ви хочете послідовності.
Що робить site.webmanifest
Коли користувач додає ваш сайт на домашній екран Android або встановлює його як PWA, браузер читає site.webmanifest, щоб знати, як повинен виглядати встановлений додаток. Він визначає:
name/short_name— мітка під іконкою.icons— які PNG використовувати на якому розмірі.theme_color— колір рядка стану, коли додаток відкритий.background_color— колір фону екрана запуску під час запуску.display— зазвичайstandalone, щоб додаток відкривався без браузерного оформлення.
Без manifest, Android повертається до apple-touch-icon і показує ваш сайт всередині вікна браузера. З одним — він виглядає як рідний додаток.
HTML фрагмент
Кожен файл знаходиться у веб-кореневій папці. Кожному сайту потрібен цей блок у <head>:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#YOUR_HEX">Дизайн для 16×16
Ваш прекрасний детальний логотип гине при 16 пікселях. Правила для створення favicon, який чітко читається на цьому розмірі:
- Одна форма. Коло, квадрат або сильний монограм. Уникайте складних форм.
- Високий контраст. Передній план та фон повинні бути розділені мінімум WCAG AA. Тонкі градієнти зникають.
- Безпечна маржа. Залишайте 10–20% відступу. Браузери часто додають свій власний бордюр на 1px.
- Текст? Одна жирна літера працює краще, ніж повне слово при 16px.
aukimi Favicon Generator створює всі шість файлів та HTML фрагмент з однієї іображення або літери менше ніж за 30 секунд. Це генерує справжній багатирозмірний .ico (відповідно до специфікації Microsoft ICONDIR), не перейменований PNG. Завантажте, виберіть свої розміри, завантажте набір без zip-архіву, вставте фрагмент — готово.
Поширені помилки
- Розміщення
.icoз CDN без заголовків кешування. Браузери кешують favicons агресивно. Використовуйте версіоновану URL (?v=2), щоб примусити оновлення після редизайну. - Різні іконки на піддомени. Один
favicon.icoна апексі — зазвичай те, що користувачі очікують — не фрагментуйте вашу ідентичність. - Забування
theme-colorмета. Mobile Chrome тонує браузерне оформлення, щоб відповідати цьому значенню. Пропуск його залишає вас із сірим за замовчуванням.
Хороший favicon нудний у найкращому розумінні — користувачі помічають, коли його немає або він неправильний, ніколи коли він правильний. Розмістіть шість файлів та рухайтесь далі.
Сподобалась ця стаття?
Пов'язані Статті
Креативний стек щойно впав: один тиждень AI-інструментів, кінець квітня 2026
З 27 квітня по 4 травня 2026 року Adobe, Luma, Novi, fal, Figma, Canva, HeyGen та Anthropic усі перетнули однаковий поріг за вісім днів. Ось що вийшло, що це означає, і де це залишає браузерні креативні люїти, що намагаються все консолідувати.
AI музика та SFX у 2026: що насправді працює в інді-ігровому звуці
Три роки тому інді-ігровий звук походив звідки-небудь з двох місць: ліцензування royalty-free бібліотек (дешево, загально, кожна гра звучить однаково) або найм композитора (чудово, дорого). У 2026 AI генерує музику, яка випускається в світ. Ось які інструменти дійсно працюють — і де людський композитор все ще перемагає.
AI Mesh Generation в 2026: Що насправді потрапляє в ігрові конвеєри
Image-to-3D перейшла від «жахливої демонстрації» до «випуску в індійських проектах» за вісімнадцять місяців. Ось що Tripo, Meshy, Rodin та Hyper3D насправді роблять у виробництві — і де тривимірний художник все ще переважає модель щоразу.