Превратите PNG, JPG, SVG или WebP в настоящий многоразмерный .ico: 16, 32 и 48 пикселей в одном файле, альфа-канал сохраняется. Выберите хранение в PNG или несжатом BMP и сравните размеры. Файлы .ico открываются и обратно.
Перетащите изображение сюда или нажмите, чтобы выбрать
PNG, JPG, SVG, WebP, GIF или BMP · до 10 МБ
Оба варианта допустимы внутри .ico. PNG читают Windows начиная с Vista и все современные браузеры; несжатый BMP лежит в 13 из 14 настоящих ICO-файлов, найденных на 20 проверенных сайтах, потому что ImageMagick по умолчанию преобразует именно в него.
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48"> <link rel="icon" type="image/svg+xml" href="/icon.svg"> <link rel="apple-touch-icon" href="/apple-touch-icon.png">
Перетащите файл .ico сюда или нажмите, чтобы выбрать
Каждый размер внутри файла показан отдельно
| Смещение | Байты | Поле | Значение |
|---|---|---|---|
| 0 | 2 | idReserved | 0 |
| 2 | 2 | idType | 1 |
| 4 | 2 | idCount | 3 |
| 6 | 1 | bWidth[0] | 16 → 16 |
| 7 | 1 | bHeight[0] | 16 → 16 |
| 8 | 1 | bColorCount[0] | 0 |
| 9 | 1 | bReserved[0] | 0 |
| 10 | 2 | wPlanes[0] | 1 |
| 12 | 2 | wBitCount[0] | 32 |
| 14 | 4 | dwBytesInRes[0] | 248 |
| 18 | 4 | dwImageOffset[0] | 54 |
| 22 | 1 | bWidth[1] | 32 → 32 |
| 23 | 1 | bHeight[1] | 32 → 32 |
| 24 | 1 | bColorCount[1] | 0 |
| 25 | 1 | bReserved[1] | 0 |
| 26 | 2 | wPlanes[1] | 1 |
| 28 | 2 | wBitCount[1] | 32 |
| 30 | 4 | dwBytesInRes[1] | 720 |
| 34 | 4 | dwImageOffset[1] | 302 |
| 38 | 1 | bWidth[2] | 48 → 48 |
| 39 | 1 | bHeight[2] | 48 → 48 |
| 40 | 1 | bColorCount[2] | 0 |
| 41 | 1 | bReserved[2] | 0 |
| 42 | 2 | wPlanes[2] | 1 |
| 44 | 2 | wBitCount[2] | 32 |
| 46 | 4 | dwBytesInRes[2] | 1464 |
| 50 | 4 | dwImageOffset[2] | 1022 |
Написано и проверено разработчиками, которые создают инструменты конвертации Go Tools. Устройство контейнера, числа байт и описанные здесь виды отказов взяты из письменного разбора предметной области, а не из чужих пересказов формата.
16, 32 и 48 пикселей Эта тройка закрывает вкладку браузера, переключатель Alt-Tab и рабочий стол и остаётся рекомендованным набором с 1995 года. Добавляйте 256 только если значок должен держаться ещё и в режиме крупных значков.
Да, ради этого он и придуман Формат и есть контейнер: шестибайтовый заголовок, по одной шестнадцатибайтовой записи каталога на изображение, затем сами изображения. Каждое из них — отдельный рисунок, и поэтому хороший значок остаётся чётким на 16 пикселях.
Нет, если всё сделано правильно Оба способа хранения изображения внутри .ico несут полный восьмибитовый альфа-канал. Прозрачность теряется только тогда, когда инструмент оставляет байты альфа-канала пустыми или выбрасывает однобитовую маску, которую вместо него читают старые программы.
264 КБ без сжатия или несколько КБ в виде PNG Несжатый слой 256 пикселей занимает ровно 270 376 байт: 40 байт заголовка, 262 144 байта пикселей и 8 192 байта маски, что бы на нём ни было нарисовано. Тот же слой в виде PNG обычно обходится в пару килобайт.
Файл .ico — это не столько формат изображения, сколько небольшой архив изображений. Он начинается с шестибайтового заголовка, который сообщает, сколько картинок внутри; дальше идёт по одной шестнадцатибайтовой записи каталога на картинку с её шириной, высотой, числом байт и положением в файле, и только потом сами данные изображений. Каждая картинка хранится одним из двух способов: как целиком вложенный файл PNG либо как несжатый растр Windows, под который подшита однобитовая маска прозрачности.
Именно из-за такого устройства favicon может выглядеть чётко и на 16 пикселях во вкладке браузера, и на 48 пикселях в файловом менеджере: это разные рисунки, подготовленные под каждый размер, а не одно изображение, которое масштабируют. Отсюда же несколько сюрпризов формата. Длина стороны хранится в одном байте, поэтому 256 записывается нулём, а 512 записать нельзя вовсе. А ещё каталог хранит для каждой записи размер, который записан и в самих данных изображения, — эти два значения могут расходиться, и разные программы верят разным.
$ file favicon.ico
favicon.ico: MS Windows icon resource - 3 icons, 16x16, 32 bits/pixel, 32x32, 32 bits/pixel
$ python3 -c "from PIL import Image; print(sorted(Image.open('favicon.ico').ico.sizes()))"
[(16, 16), (32, 32), (48, 48)] По умолчанию 16, 32 и 48 пикселей, максимум 256. Каждый размер рисуется из оригинала отдельно и в полном качестве, а не масштабируется из слоя выше, поэтому маленькие размеры не наследуют размытость большого.
У двух допустимых форматов payload очень разные компромиссы, и большинство конвертеров вообще не сообщает, какой из них записывает. Здесь это переключатель, и для каждого варианта показан итоговый размер файла, так что решение принимается по числу, а не наугад.
Альфа-канал записывается полностью, а однобитовая маска, которую вместо него читают старые программы, не остаётся пустой, а выводится из альфа-канала. Именно пустая маска превращает прозрачный значок в чёрный квадрат там, где читают только её.
Обратная вкладка показывает каждое изображение внутри .ico с настоящим размером, форматом хранения, битовой глубиной и источником прозрачности — включая палитровые растры, которые до сих пор используют несколько известных favicon. Браузер покажет вам лишь одно из них.
Если каталог заявляет размер, который не совпадает с данными изображения, это отмечается. Отмечается и встроенный PNG, который выбросит Firefox: его декодер ICO принимает только 8-битный RGB или RGBA, поэтому палитровый или полутоновый слой там просто исчезает, хотя все остальные браузеры его показывают. И то и другое — частая причина того, что значок работает в одной программе и выводится пустым в другой, и ни один другой конвертер об этом не сообщает.
Чтение, изменение размера и упаковка целиком происходят на этой странице. Файл не попадает на сервер, поэтому потом нечего удалять и не нужно ждать очереди.
magick in.png -define icon:auto-resize=48,32,16 favicon.ico Обычный ответ и причина того, что так много favicon хранится без сжатия. Каждый слой, кроме 256 пикселей, перед упаковкой превращается в растр, поэтому три размера выходят примерно в 15 КБ вместо нескольких сотен байт. Размеры записываются от большего к меньшему.
img.save('favicon.ico', sizes=[(16,16),(32,32),(48,48)]) Вкладывает PNG, поэтому те же три размера занимают примерно в десять раз меньше места. Pillow хорошо и читает ICO: Image.open(f).ico.sizes() покажет, что внутри, — удобно, когда нужно проверить чужой файл.
npx png-to-ico icon.png > favicon.ico Узкоспециальная утилита командной строки: берёт один или несколько файлов PNG и упаковывает их как payload в формате PNG. Удобно в сборочном сценарии; размер она не меняет, поэтому каждый размер вы передаёте отдельным файлом.
sharp(input).resize(32).png() Отлично подходит, чтобы подготовить отдельные файлы PNG, но контейнеры ICO не пишет, поэтому его обычно дополняют одним из упаковщиков выше. Частый источник путаницы, когда сборка уже построена вокруг sharp.
github.com/Kodeworks/golang-image-ico Пишет ICO с одним изображением из значения image.Image. Для favicon одного размера этого достаточно; чтобы упаковать несколько размеров в один контейнер, каталог придётся написать самостоятельно — это примерно тридцать строк.
.rc, rc.exe Так обычно и делают значки приложений. Компилятор встраивает .ico в секцию ресурсов исполняемого файла; контейнер внутри имеет ровно тот же формат, что и веб-favicon.
.ico Экспортирует каждый слой изображения как один размер значка и позволяет выбрать битовую глубину для каждого слоя, включая сжатый PNG. Один из немногих графических редакторов, который показывает этот выбор, а не решает молча.
sips -s format ico in.png --out favicon.ico В macOS запись ICO всё-таки есть: sips --formats показывает com.microsoft.ico как доступный для записи, и команда выше действительно создала корректный файл. Чего он не умеет — упаковать несколько размеров: на выходе был один слой 48×48. iconutil, который обычно подсказывают результаты поиска, делает .icns, собственный контейнер Apple, который не читают ни Windows, ни браузеры.
$ xxd -l 38 favicon.ico
00000000: 0000 0100 0300 1010 0000 0100 2000 e903 ............ ... 00000010: 0000 3600 0000 2020 0000 0100 2000 6c05 ..6... .... .l. 00000020: 0000 1f04 0000 ......
0000 — зарезервированное поле, 0100 — тип 1 (значок, а не курсор), 0300 говорит, что изображений три. Дальше идёт первая 16-байтовая запись каталога: 10 10 — это 16×16, 00 — число цветов, 00 — резерв, 0100 — одна плоскость, 2000 — 32 бита на пиксель, а e903 0000 — 1 001 байт payload по смещению 3600 0000 = 54, то есть ровно 6 + 3 × 16 — конец каталога. Все числа записаны в little-endian, кроме размеров: они занимают по одному байту.
bWidth = 0x00 bHeight = 0x00
256 × 256
В каталоге на каждую сторону отведён один байт, поэтому самое большое число, которое туда помещается, — 255, а 0 по определению означает 256. Это же причина, по которой на этой странице нигде нет 512 пикселей: байта, означающего 512, просто не существует. Несколько онлайн-конвертеров всё равно предлагают этот вариант и записывают изображение 512 пикселей за записью каталога, которая не может его описать.
16 + 32 + 48 px, PNG payloads 16 + 32 + 48 px, uncompressed BMP payloads
389 bytes 15,086 bytes
Несжатый payload занимает 40 + ширина × высота × 4 байта плюс однобитовая маска, поэтому его размер зависит только от размеров изображения и совсем не зависит от картинки. Именно поэтому три разных сайта могут выложить три совершенно непохожих значка в файлах одинаковой длины.
$ magick logo.png -define icon:auto-resize=48,32,16 favicon.ico $ file favicon.ico
favicon.ico: MS Windows icon resource - 3 icons, 48x48, 32 bits/pixel, 32x32, 32 bits/pixel
ImageMagick перед упаковкой превращает каждый слой, кроме 256 пикселей, в несжатый растр — поэтому на выходе получается около 15 КБ, а не несколько сотен байт. Pillow поступает наоборот и вкладывает PNG: Image.open('logo.png').save('favicon.ico', sizes=[(16,16),(32,32),(48,48)]).
$ magick favicon.ico favicon-%d.png
favicon-0.png 48×48 favicon-1.png 32×32 favicon-2.png 16×16
Браузер этого за вас не сделает. Отдайте многоразмерный .ico тегу <img> — и получите ровно одно изображение, самое большое, в каком бы порядке ни шли размеры внутри. Чтобы увидеть, что на самом деле лежит в файле, контейнер приходится разбирать вручную, и именно это делает вкладка ICO → PNG.
Принимаются PNG, JPG, SVG, WebP, GIF и BMP размером до 10 МБ. Ничего не покидает браузер: файл читается через File API, а каждый пиксель рисуется на локальном canvas.
Изначально отмечены 16, 32 и 48 пикселей. Добавьте 64, 128 или 256, если значок должен пережить режим крупных значков или экран с высокой плотностью пикселей. Если исходник меньше самого большого отмеченного размера, страница прямо об этом скажет, а не увеличит его молча.
По умолчанию используется PNG: он на порядок меньше, и его читают все современные браузеры и все версии Windows начиная с Vista. Переключитесь на несжатый BMP, если нужен тот вид, в котором на самом деле лежит большинство опубликованных favicon. Оба размера файла показаны рядом.
Сохраните .ico и нажмите «Скопировать теги link», чтобы получить разметку. Путь /favicon.ico в корне по-прежнему работает как запасной вариант, но браузерам предписано сначала пробовать явный элемент link.
Байт каталога для изображения 256 пикселей должен быть равен 0. Запись 255 выглядит безобидной ошибкой на единицу, а на выходе получается файл, который некоторые браузеры молча отказываются рисовать.
bWidth = 0xFF bHeight = 0xFF ; «255», имелось в виду 256
bWidth = 0x00 bHeight = 0x00 ; 0 по определению означает 256
Когда запись каталога говорит 16×16, а payload на самом деле 32×32, декодеры делятся: одни верят каталогу и не рисуют ничего, другие верят payload и показывают изображение нормально. Файл после этого работает на одной машине и не виден на другой.
запись: 16×16 payload IHDR: 32×32
запись: 32×32 payload IHDR: 32×32
Внутри несжатого слоя высота охватывает цветные данные и маску вместе. Если записать обычную высоту, получится файл, который в одних декодерах выглядит пустым, а в других — нижней половиной изображения, и в обоих случаях без ошибки.
biHeight = 32 ; для изображения 32 пикселя
biHeight = 64 ; 2 × 32, цветные данные плюс маска
Некоторые инструменты заполняют маску и оставляют каждый байт альфа-канала нулевым. Один декодер читает это как полностью прозрачное изображение, и значок исчезает; другой возвращается к маске и показывает его правильно. Записывать оба значения согласованно — значит снять весь спор.
байты альфа-канала: все 0x00 маска: вся 0x00
байты альфа-канала: реальные значения маска: выставлена там, где альфа < 128
Внешние ссылки внутри SVG блокируются при растеризации, и об этом ничто не сообщает: ошибка не возникает, а canvas остаётся читаемым. Заглушка «битая картинка» просто запекается в значок. Встройте графику в документ перед конвертацией.
<image href="https://cdn.example.com/logo.png"/>
<image href="data:image/png;base64,iVBORw0KGgo…"/>
00 00, 01 00 для значка (02 00 отмечает файл курсора) и двухбайтового счётчика. Каждая запись каталога — это ширина, высота, размер палитры и зарезервированный байт, по одному байту на каждое, затем двухбайтовые поля числа плоскостей и битовой глубины и два четырёхбайтовых поля с длиной и смещением payload. Всё многобайтовое записано в little-endian.ceil(ширина ÷ 32) × 4 байта на строку. Поэтому слой 16 пикселей занимает 1 128 байт, 48 пикселей — 9 640, а 256 пикселей — 270 376, независимо от того, что изображено. Из-за этой фиксированной стоимости три никак не связанных сайта могут выложить favicon побайтово одинаковой длины; по той же причине слой 256 пикселей предлагается здесь только тогда, когда payload — это PNG.image/vnd.microsoft.icon зарегистрирован в IANA в сентябре 2003 года, и ссылается он на статью Microsoft 1995 года под названием «Icons in Win32». А RFC 2361, который широко цитируют как спецификацию ICO, на самом деле называется «WAVE and AVI Codec Registries» и об изображениях не говорит вовсе.magick logo.png -define icon:auto-resize=48,32,16 favicon.ico. Конвертеры
Конвертация между системами счисления — двоичной, hex, десятичной, восьмеричной и любой базой 2-36 мгновенно. Бесплатно, приватно — вся обработка в браузере.
Конвертеры
Введите знаковое целое и получите прямой, обратный, дополнительный и смещённый код сразу, от 4 до 64 бит. Или вставьте битовый паттерн либо hex-байт и увидите все пять прочтений рядом. Локально и бесплатно.
Конвертеры
Конвертация прав доступа Linux между восьмеричной записью (755, 644) и символами rwx. Готовые команды chmod и предупреждения о рискованных режимах вроде 777 — бесплатно, прямо в вашем браузере.
Конвертеры
Конвертируйте HEX в RGB, HSL, OKLCH, OKLAB и CMYK прямо в браузере — копируйте любой формат в один клик. Бесплатно, без регистрации, ваши цвета никогда не покидают страницу.
Конвертеры
Конвертируйте HEX-цвета в CMYK прямо в браузере. Наивное приближение на основе sRGB для предпросмотра печати. Бесплатно, без регистрации, ваши цвета остаются локально.
Конвертеры
Конвертируйте любой HEX-цвет в HSL прямо в браузере — поддерживаются 3-значные, 6-значные и 8-значные HEX с альфой. Бесплатно, мгновенно, без регистрации, ваши цвета никогда не покидают страницу.