Розробка favicon та touch-іконок сайту
Favicon — не один файл, а набір артефактів для різних платформ та сценаріїв використання. Правильний набір охоплює браузерні вкладки, закладки, PWA-іконки, ярлик на домашньому екрані iOS/Android, плитку в Windows, OG-превю.
Повний набір іконок
| Файл | Розмір | Призначення |
|---|---|---|
favicon.ico |
16×16, 32×32 (multi-size) | Браузери, зворотна сумісність |
favicon-16x16.png |
16×16 | Chrome, адресна рядок |
favicon-32x32.png |
32×32 | Safari, Retina |
apple-touch-icon.png |
180×180 | iOS «додати на екран» |
android-chrome-192x192.png |
192×192 | Android Chrome |
android-chrome-512x512.png |
512×512 | PWA splash screen |
mstile-150x150.png |
150×150 | Windows плитка |
safari-pinned-tab.svg |
SVG | Safari Pinned Tab |
Генерація та конфігурація
Усі файли зручно генерувати з одного 512×512 SVG-джерела через realfavicongenerator.net або CLI-інструмент favicons (npm):
const favicons = require('favicons');
const response = await favicons('./src/logo.svg', {
appName: 'My App',
background: '#ffffff',
theme_color: '#2563eb',
icons: { android: true, appleIcon: true, favicons: true }
});
manifest.json для PWA повинен посилатися на іконки 192 та 512:
{
"icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
]
}
Атрибут "purpose": "maskable" потрібен для Android Adaptive Icons: іконка розроблена з «безпечною зоною» 80% від розміру (40px відступ зі всіх сторін для 512×512).
Вимоги до джерела
Логотип повинен читатися на 16×16: спрощена монограма замість повного логотипу. Фон — або повністю прозорий (PNG), або залитий фірмовим кольором. Safari Pinned Tab приймає тільки монохромний SVG з fill="black".
Часові рамки
Підготовка повного набору favicon та touch-іконок: 0,5–1 робочий день.