Разработка 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 рабочий день.