Как выглядит полный комплект
| Файл | Размер | Где показывается |
| --- | --- | --- |
| favicon.ico | 16 + 32 + 48 | вкладка, закладки, старые запросы |
| favicon-32x32.png | 32 | вкладки современных браузеров |
| favicon-16x16.png | 16 | вкладки при обычной плотности |
| apple-touch-icon.png | 180 | экран «Домой» в iOS |
| android-chrome-192x192.png | 192 | экран «Домой» в Android |
| android-chrome-512x512.png | 512 | заставка PWA |
Шесть файлов и манифест. Всё сверх этого — наследие десятилетней давности.
Разметка в head
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32">
<link rel="icon" href="/favicon-16x16.png" type="image/png" sizes="16x16">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
Всё это кладётся в корень сайта, а не в папку с ассетами: часть клиентов игнорирует путь и всё равно смотрит в корень.
Дизайн под 16 пикселей
Логотип, который хорошо смотрится на визитке, обычно проваливается как фавикон. На 16 px у вас в распоряжении примерно 256 пикселей.
- Одна фигура, а не надпись. Текст нечитаем примерно ниже 40 px.
- Высокий контраст и на светлой, и на тёмной панели вкладок. Проверьте оба.
- Убирайте мелкие детали. Тонкие линии исчезают при уменьшении полностью.
- Кадрируйте плотнее. Монограмма или характерная часть знака выигрывает у всего логотипа целиком.
Настоящий .ico, собранный здесь
Это не переименованный PNG. Здесь пишется настоящий контейнер ICO: заголовок каталога и по записи на каждый размер со встроенными данными PNG — так формат разрешает начиная с Vista. Ваше изображение не покидает браузер.
Вопросы
Нужен ли ещё favicon.ico?+
Да, и по досадной причине: браузеры запрашивают `/favicon.ico` из корня сайта, даже если ни один link-тег его не упоминает. Без файла вы получаете 404 в логах на каждом первом визите. Предотвратить это стоит пары килобайт.
Почему в .ico несколько размеров?+
Потому что формат — это контейнер. Один файл содержит версии 16, 32 и 48 px, и браузер берёт нужную. Это важно: иконка 16 px, ужатая из 512 px, превращается в кашу — мелким размерам нужна собственная отрисовка.
Какого размера должен быть исходник?+
Не меньше 512 px и квадратный, а лучше SVG. Меньше — и иконка PWA на 512 px будет растянутой и мыльной.
Нужен ли прозрачный фон?+
Для вкладки браузера прозрачность подходит и обычно даже лучше. Для иконки iOS — нет: iOS накладывает прозрачные области на чёрное, и тёмный логотип становится невидимым. Touch-иконку делайте на сплошном фоне.