Пошук за запитом «розмір фавікона» досі пропонує списки з п’ятнадцяти файлів, успадковані з 2014 року. Насправді сьогодні шість розмірів охоплюють вкладки браузера, пошукову видачу, iOS, Android і PWA. Розглянемо, які саме й навіщо.
Розміри, які вам дійсно потрібні
Кожен рядок відповідає задокументованому використанню в запропонованому пакеті. Таблиця надає перевагу невеликому сумісному набору, а не колекції історичних варіантів.
| Файл | Розміри | Для чого це |
|---|---|---|
| favicon.ico | 16×16, 32×32, 48×48 | Вкладки, закладки, старі браузери, сканери |
| favicon.svg | вектор, квадрат | Сучасні браузери, чіткість за будь-якого розміру, підтримка темної теми |
| favicon-96x96.png | 96×96 | Результати пошуку Google на мобільних пристроях |
| apple-touch-icon.png | 180×180 | Головний екран iOS і iPadOS без прозорості |
| web-app-manifest-192x192.png | 192×192 | Головний екран Android, оголошений у вебманіфесті |
| web-app-manifest-512x512.png | 512×512 | Екран-заставка PWA, версія "maskable". |
Чому 16, 32 і 48 живуть в одному .ico
ICO — це контейнерний формат: один файл може містити кілька зображень, і браузер вибирає те, що відповідає його відображенню. Це саме те, що ви хочете, оскільки запитуваний розмір змінюється залежно від контексту.
Розмір 16×16 призначений для вкладки на звичайному екрані. 32×32 підходить для дисплеїв із високою щільністю пікселів та інших елементів браузера. 48×48 доповнює контейнер і відповідає правилу кратності 48, яке Google описує для фавіконів у результатах пошуку.
Надсилання файлу .ico, який містить лише 16×16, є найпоширенішою помилкою: на екрані Retina ваша піктограма збільшується та виглядає постійно розмитою.
180×180 для iOS, 192 і 512 для Android
iOS не читає вебманіфест для піктограми головного екрана: він шукає тег apple-touch-icon. Досить одного розміру, 180×180, який охоплює всі останні iPhone та iPad. Система сама зменшує його для старіших пристроїв.
Android натомість використовує вебманіфест. Достатньо двох записів: 192×192 для іконки на домашньому екрані та 512×512 для екрана запуску, коли сайт встановлено як застосунок. Для варіанта 512 слід указати purpose "maskable": його зображення має витримувати обрізання до кола або квадрата із заокругленими кутами.
Для значка maskable зберігайте найнеобхідніше всередині центральних 80%. Залежно від виробника телефону можна обрізати будь-який зовнішній вміст.
З якого вихідного зображення почати
Найкращою відправною точкою є SVG: він без втрат масштабується до будь-якого розміру вище. Якщо це не вдасться, використовуйте квадрат PNG принаймні 512×512 пікселів, щоб навіть піктограма Android створювалася шляхом зменшення масштабу, а не збільшенням масштабу.
Горизонтальний логотип із текстом не працює на 16×16: за такого розміру слово перетворюється на три пікселі каші. Витягніть символ або почніть з однієї або двох літер на контрастному фоні.
Нарешті, перевірте контрастність як на світлому, так і на темному тлі: чорний логотип зникає на вкладці з темною темою. Саме для цього призначений темний варіант фавіконки SVG.
Розміри, які вам більше не потрібні
Старіші генератори все ще створюють файли для історичних інтеграцій, наприклад плитки Windows з використанням mstile-150x150.png і browserconfig.xml. Додавайте їх лише тоді, коли ваша матриця підтримки явно націлена на ці інтерфейси.
Довгі серії apple-touch-icon-57x57, 60x60, 72x72, 76x76, 114x114, 120x120, 144x144 та 152x152 походять із того часу, коли iOS не міг змінити розмір. Одне зображення 180×180 замінює їх усі.
Видалення непотрібних оголошень спрощує репозиторій і HTML. Перш ніж прибирати наявну інтеграцію, перевірте, які браузери та платформи ви плануєте підтримувати.
Першоджерела
Поширені запитання
Вам все ще потрібен favicon.ico?
Так, але тільки в корені сайту. Сучасні браузери віддають перевагу SVG, однак багато сканерів, агрегаторів і поштових клієнтів усе ще запитують /favicon.ico, не читаючи ваш HTML. Файл важить кілька кілобайт: збережіть його.
Який розмір піктограми Google використовує в результатах пошуку?
Google запитує піктограму, сторона якої кратна 48 пікселям, і зазвичай відображає її на 48×48. 96×96 PNG або SVG легко покриває це. Піктограма має бути доступною для сканування та не блокуватися robots.txt.
Чи може мій фавікон бути прямокутним?
Технічно так, візуально ні. Кожен контекст відображення резервує квадрат: прямокутне зображення або спотворене, або центроване з порожніми смугами. Завжди починайте з квадрата, за потреби додаючи відступи навколо символу.