Фавікон більше не одне зображення. Браузери, телефони й операційні системи кожен хапає інший розмір для іншого слоту — вкладка браузера, закладка, домашній екран iOS, перемикач застосунків Android. Випустіть один PNG 32×32 — і він спрацює у вкладці, але виглядатиме розмито, коли хтось збереже ваш сайт на телефон. Випустіть повний набір — і кожна поверхня отримає різку іконку.
Ось точно які розміри вам потрібні, що робить кожен і чому список виглядає саме так.
Розміри, що мають значення
Більшість сайтів покриваються шістьма розмірами PNG плюс застарілим .ico. Ось довідник:
| Розмір | Формат | Де використовується |
|---|---|---|
| 16×16 | PNG (у .ico) | Вкладка браузера, адресний рядок, закладки |
| 32×32 | PNG (у .ico) | Retina-вкладки, ярлики панелі задач Windows |
| 48×48 | PNG | Іконки сайтів Windows, деякі поверхні Android |
| 180×180 | PNG | Домашній екран iOS (apple-touch-icon) |
| 192×192 | PNG | Домашній екран Android, встановлення PWA |
| 512×512 | PNG | Заставка PWA, магазини застосунків, високий DPI |
Файл favicon.ico — це контейнер, що зв'язує малі розміри (зазвичай 16 і 32, іноді 48). Старіші браузери й Windows шукають його за іменем у корені вашого сайту, тож його все ще варто випускати, хоч сучасні браузери залюбки використовують PNG.
Чому так багато? Швидкий огляд
Причина, чому список довгий, — іконка з'являється в дико різних фізичних розмірах.
16 і 32 — щоденні іконки вкладок. 16 — класичний розмір; 32 покриває екрани високого DPI («Retina»), де 16 виглядало б м'яко. Браузери обирають той, що пасує щільності пікселів.
48 — це річ Windows — використовується для ярликів сайтів і показується різкіше в кількох місцях, які 32 покриває не дуже добре.
180 — це apple-touch-icon від Apple. Коли хтось торкається «Додати на домашній екран» на iPhone чи iPad, iOS використовує це. Помиліться — і iOS або схопить зменшений скріншот, або покаже просту літерну плитку — жодне не виглядає як ваш бренд.
192 і 512 — розміри Progressive Web App, оголошені у файлі manifest.webmanifest. 192 — іконка домашнього екрана Android; 512 живить заставку й зменшується для всього іншого, що потрібне ОС. Якщо ваш сайт можна встановити, ці два не обговорюються.
Чи потрібно більше за 512?
Ні. 512×512 — практична стеля для вебфавіконів — специфікація webmanifest і кожна велика платформа завершуються приблизно там. Якщо ваше вихідне мистецтво 1024 чи більше, це нормально як початкове зображення (більше деталей для зменшення), але ви не випускаєте фавікон 1024. Будь-що вище 512 просто додає байти, якими ніхто не користується.
Єдине правило, що має значення вгору: починайте з великого, квадратного джерела. Оригінал 512×512 чи 1024×1024 чисто зменшується до кожного розміру нижче нього. Почніть із крихітного зображення — і малі розміри виглядають каламутно, бо деталей ніколи не було достатньо, щоб зберегти.
Проєктуйте так, щоб воно пережило 16×16
Найскладніший розмір — найменший. При 16×16 деталізований логотип стає нечитабельною плямою. Кілька порад, що тримаються по всіх сайтах:
- Спрощуйте. Повний словесний знак не прочитається при 16px. Використайте одну літеру, монограму чи найвпізнаванішу частину вашого знака.
- Тримайте контраст високим, щоб форма лишалася розбірливою на світлих і темних фонах вкладок.
- Лишіть трохи відступу — іконка, що торкається всіх чотирьох країв, відчувається затісною у вкладці.
- Тестуйте малим. Зменшіть масштаб браузера чи просто подивіться на реальну вкладку. Якщо ви не можете сказати, що це, з одного погляду, спрощуйте далі.
Генерація всього набору
Ви не будуєте це вручну. Киньте одне квадратне зображення в Генератор фавіконів — і він видасть повний набір за раз: favicon.ico, PNG 16/32/48/180/192/512, готовий до вжитку webmanifest і точний фрагмент HTML <head> для вставлення. Усе працює у вашому браузері: зображення ніколи не завантажується, а після першого відвідування інструмент працює офлайн.
HTML, який ви отримаєте
Для довідки, повне налаштування фавікону виглядає приблизно так у вашому <head>:
<link rel="icon" href="/favicon.ico" sizes="any">
<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">
Генератор пише це за вас, тож ви можете вставити його прямо. Покрийте шість розмірів плюс .ico і маніфест — і кожен браузер, телефон і ОС отримає різку іконку, яку просить.