Фавикон — не одно изображение. Это маленький значок во вкладке браузера, значок побольше, который телефон использует при добавлении сайта на домашний экран, и ещё больший значок, которого ждут манифест PWA и списки приложений. Каждому контексту нужен свой размер, и ошибка в одном из них заметна: значок 16 пикселей, растянутый на плитку домашнего экрана, выглядит сломанным так, что посетители это замечают.
Этот генератор создаёт весь набор из одного изображения. Ваш исходник обрезается по центру в квадрат, масштабируется под каждый нужный размер ресемплером pica, а не браузерным фильтром по умолчанию — что колоссально важно на 16 пикселях, где грубое масштабирование превращает логотип в пятно, — и упаковывается в ZIP вместе с настоящим многоразмерным файлом .ico.
Значки генерируются в браузере. Неопубликованные логотипы и фирменные материалы не загружаются ни в какой сервис.
<head> ваших страниц.| Файл | Размер | Используется |
|---|---|---|
| favicon.ico | 16, 32 и 48 вместе | Вкладками браузера, закладками, старой совместимостью |
| favicon-16x16.png | 16 × 16 | Значок вкладки на экранах обычной плотности |
| favicon-32x32.png | 32 × 32 | Значок вкладки на экранах высокой плотности |
| favicon-48x48.png | 48 × 48 | Ярлыки сайтов в Windows |
| apple-touch-icon.png | 180 × 180 | Домашний экран iOS |
| icon-512.png | 512 × 512 | Домашний экран Android, манифест PWA, списки приложений |
Файл .ico — настоящий многоразмерный контейнер, содержащий версии 16, 32 и 48 пикселей, а не переименованный PNG. Windows и старые браузеры выбирают размер, подходящий тому контексту, в котором они рисуют.
Распакуйте ZIP в корень сайта и добавьте это в <head> каждой страницы:
| Назначение | Тег |
|---|---|
| Классический фавикон | <link rel='icon' href='/favicon.ico' sizes='any'> |
| Обычная плотность | <link rel='icon' type='image/png' sizes='16x16' href='/favicon-16x16.png'> |
| Высокая плотность | <link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'> |
| Домашний экран iOS | <link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'> |
Значок 512 пикселей указывается в манифесте вашего веб-приложения, а не тегом link.
Фавикон часто показывается размером 16 пикселей по стороне — примерно с один символ обычного текста. Полный логотип на таком масштабе нечитаем; детальная иллюстрация превращается в шум.
Работают одна буква, простая монограмма или решительная форма с сильным контрастом и на светлых, и на тёмных вкладках. Проверьте, уменьшив логотип до 16 пикселей и посмотрев на него с вытянутой руки: если не понимаете, что это, не поймёт никто.
Не менее 512 × 512 и желательно квадратный. Исходник обрезается по центру в квадрат, поэтому широкий логотип потеряет края. Сначала дополните его до квадрата инструментом «Сделать квадратным», если это проблема.
Да. Это подлинный многоразмерный контейнер ICO с изображениями 16, 32 и 48 пикселей, а не PNG со сменённым расширением. Windows и старые браузеры читают его корректно.
В корневой каталог сайта, чтобы они были доступны по путям вида /favicon.ico. Затем добавьте на страницы теги link, показанные выше.
Браузеры очень настойчиво кешируют фавиконы. Сделайте принудительную перезагрузку или откройте URL файла значка напрямую, чтобы убедиться, что он отдаётся, и перезагрузите страницу.
Да для файлов PNG, которые сохраняют альфа-канал. Учтите, что прозрачный значок должен работать и на светлых, и на тёмных вкладках.
Нет. Обрезка, масштабирование и сборка ICO выполняются в браузере.