Как пользоваться
- Перетащите файл .ico в область загрузки, нажмите на неё, чтобы выбрать файл, или вставьте изображение.
- Оставьте в списке «Преобразовать в» значение «Исходный формат», чтобы все размеры, хранящиеся в значке, попали в результат.
- Проверьте размер после кодирования: значок с множеством размеров может оказаться больше, чем вы ожидаете.
- Скопируйте data URI для тега link с favicon либо тег img, CSS или Markdown.
Формат ICO
ICO — формат значков Windows и исходный формат favicon. Это контейнер: короткий каталог перечисляет одно или несколько изображений с их шириной, высотой и глубиной цвета, а каждое изображение хранится в виде точечного рисунка или, для крупных размеров вроде 256 на 256, в виде встроенного PNG. Типичный favicon.ico содержит версии размером 16, 32 и 48 пикселей, чтобы браузер мог выбрать самую чёткую.
Зарегистрированный тип MIME — image/vnd.microsoft.icon, но image/x-icon встречается гораздо чаще, и браузеры принимают оба. Данные ICO в Base64 начинаются с AAABAA — закодированного заголовка файла.
Favicon в виде data URI
<link rel="icon" href="data:image/x-icon;base64,AAABAAEAEBA...">Встроенный favicon удобен для HTML-документов в одном файле, например экспортированных отчётов, сохранённых на диск дашбордов и офлайн-документации, а также для прототипов и внутренних инструментов, где не хочется размещать отдельный файл. На сайте с множеством страниц обычно лучше привычный /favicon.ico: он загружается один раз и кешируется, а data URI повторяется в каждом ответе HTML.
Если значок вообще не нужен, <link rel="icon" href="data:,"> не даёт браузеру запрашивать /favicon.ico.
Favicon в формате ICO, PNG или SVG
Современные браузеры также принимают favicon в форматах PNG и SVG, например <link rel="icon" type="image/png" href="data:image/png;base64,...">. Один PNG размером 32 на 32 часто меньше многоразмерного ICO; для таких значков используйте PNG в Base64 или SVG в Base64.
При преобразовании ICO в PNG, JPEG или WebP здесь сохраняется только одно изображение — то, которое браузер выбирает для показа. Чтобы, наоборот, создать файл ICO, закодируйте PNG и вставьте результат в инструмент Base64 в ICO, который создаёт значки размером от 16 до 256 пикселей.
Часто задаваемые вопросы
Какой тип MIME лучше указывать в префиксе для значка: image/x-icon или image/vnd.microsoft.icon?
image/vnd.microsoft.icon — официально зарегистрированный тип, а image/x-icon используется на большинстве сайтов. Если система ожидает определённый тип, исправьте префикс после копирования.Сохраняются ли все размеры значка в результате Base64?
Да, если оставить исходный формат. Кодируется весь файл, поэтому браузер по-прежнему может выбрать нужный размер. При преобразовании в другой формат остаётся одно изображение.
Работают ли favicon в виде data URI во всех браузерах?
Современные настольные браузеры показывают их на вкладке. Закладки, ярлыки на главном экране и некоторые старые браузеры могут игнорировать встроенный значок, поэтому публичным сайтам всё равно стоит предоставлять файл favicon.