Как пользоваться
- Вставьте строку Base64 или data URI значка либо изображения, из которого хотите сделать значок.
- Проверьте предпросмотр и размеры. Самый аккуратный значок получается из квадратного исходного изображения.
- Формат ICO уже выбран. В списке «Размер значка» укажите один размер (16, 32, 48, 64, 128 или 256 пикселей) или значок с несколькими размерами.
- Скачайте файл .ico. Если на входе уже ICO и все изображения в нём нужно сохранить без изменений, выберите «Оригинал».
Файлы ICO в Base64
Файл ICO — это небольшой контейнер: заголовок, каталог записей и по одному изображению на запись, каждое из которых хранится в виде данных BMP или PNG. Заголовок начинается с байтов 00 00 01 00, поэтому Base64 значка начинается с AAABAA. Значки в Base64 встречаются в data URI для favicon, например <link rel="icon" href="data:image/x-icon;base64,...">, в HTML-страницах из одного файла и в API, которые возвращают значки сайтов.
Зарегистрированный тип MIME — image/vnd.microsoft.icon, но image/x-icon встречается гораздо чаще и работает везде.
Какой размер значка выбрать
| Размер | Типичное применение |
|---|---|
| 16 × 16 | Вкладка браузера и закладки на обычных экранах |
| 32 × 32 | Вкладка браузера на экранах высокой плотности |
| 48 × 48 | Значки на рабочем столе Windows и в Проводнике |
| 64, 128 | Крупные превью и списки приложений |
| 256 × 256 | Режимы «Крупные значки» и «Огромные значки» в Windows |
Вариант с несколькими размерами упаковывает 16, 32, 48 и 256 в один файл, чтобы каждая система могла выбрать наиболее подходящий. Изображения внутри сжаты в формате PNG: так сохраняется прозрачность, а сам формат поддерживается в Windows Vista и более поздних версиях, а также во всех современных браузерах.
Как использовать значок в качестве favicon
Браузеры автоматически запрашивают /favicon.ico из корня сайта, поэтому сохранённый там файл работает даже без какой-либо разметки. Data URI в Base64 в атрибуте href избавляет от этого запроса, но тогда значок загружается заново с каждой страницей, а не кешируется отдельно. Современные браузеры принимают также значки PNG и SVG, и распространённая схема сочетает оба варианта:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">Начните с квадратного изображения с простыми формами и высокой контрастностью: мелкие детали пропадают при размере 16 пикселей. Чтобы получить версию PNG для других целей, воспользуйтесь инструментом Base64 в PNG.
Часто задаваемые вопросы
Какого размера должен быть favicon.ico?
Значок с несколькими размерами, содержащий изображения 16, 32 и 48 пикселей, подходит и для браузеров, и для Windows. Вариант с несколькими размерами в этом инструменте добавляет ещё и 256 для режимов крупных значков.
Можно ли преобразовать PNG или SVG из Base64 в ICO?
Да. Вставьте данные, оставьте в списке «Скачать как» формат ICO и выберите размер. Преобразовать можно любое изображение, которое показывает ваш браузер.
Почему в предпросмотре виден только один размер значка?
Файл ICO может содержать несколько изображений, но предпросмотр показывает только одно из них. Скачайте файл как «Оригинал», чтобы сохранить все изображения.
Сохраняет ли ICO прозрачность?
Да. Значки хранятся в виде данных PNG с полноценным альфа-каналом, поэтому скруглённые углы и мягкие края остаются прозрачными.
Как поместить значок в data URI?
href тега <link rel="icon">.