Base64 в ICO

Как перевести Base64 в ICO

1. Вставьте Base64, URI data:image/x-icon;base64,... или весь тег <link rel="icon" href="data:...">.
2. Убедитесь, что в строке статуса написано Определено: ICO, и посмотрите на превью.
3. Нажмите Скачать файл. По умолчанию имя – decoded.ico; если файл пойдёт на сайт, переименуйте его в favicon.

Поле MIME-тип показывает image/x-icon: этот тип большинство серверов и data URI используют для иконок.

ICO как папка с изображениями

В отличие от PNG или JPEG, файл ICO – небольшой контейнер. Типичный favicon.ico содержит версии 16×16, 32×32 и 48×48, а иконки приложений Windows часто добавляют 256×256. Windows выбирает лучший размер для панели задач, ярлыка на рабочем столе или Проводника, а браузеры – для вкладки.

Файл начинается с 6-байтового заголовка, за которым идёт по одной 16-байтовой записи каталога на каждое изображение. Поэтому Base64 любого ICO начинается с AAABAA (байты 00 00 01 00). Вот что выводит кнопка Показать hex-дамп для иконки с тремя размерами:

00000000  00 00 01 00 03 00 10 10  00 00 00 00 20 00 56 00  |............ .V.|
00000010  00 00 36 00 00 00 20 20  00 00 00 00 20 00 6b 00  |..6...  .... .k.|
00000020  00 00 8c 00 00 00 30 30  00 00 00 00 20 00 8c 00  |......00.... ...|
00000030  00 00 f7 00 00 00 89 50  4e 47 0d 0a 1a 0a 00 00  |.......PNG......|

Следующие две записи описывают 32×32 (20 20) и 48×48 (30 30). По смещению 54 начинается первое изображение, и .PNG в текстовом столбце показывает, что оно хранится как PNG.

Внутри PNG или BMP

Каждое изображение в ICO хранится либо как полноценный файл PNG, либо как bitmap без привычного заголовка файла BM. Во втором случае его данные начинаются с 28 00 00 00, а высота в заголовке bitmap удвоена, потому что за цветными пикселями идёт 1-битная маска прозрачности. Большие изображения 256×256 обычно хранятся в PNG, потому что несжатый 32-битный bitmap такого размера занимает больше 256 KB.

Отсюда частый сюрприз: строка ICO бывает намного длиннее, чем можно ожидать по виду иконки. В ней лежат все размеры, а записи bitmap не сжаты. Для сайта один PNG 32×32 или favicon в SVG обычно намного меньше. Как их встраивать, описано на странице favicon в Base64.

Как перечислить и извлечь изображения в коде

Эта функция на Python читает каталог и возвращает каждое изображение с размером и форматом:

import base64, struct

def ico_entries(b64: str):
    data = base64.b64decode(b64.split(",", 1)[-1])
    reserved, kind, count = struct.unpack_from("<HHH", data, 0)
    if reserved != 0 or kind not in (1, 2):
        raise ValueError("not an ICO or CUR file")
    for i in range(count):
        w, h, colors, _, _, bpp, size, offset = struct.unpack_from("<BBBBHHII", data, 6 + 16 * i)
        image = data[offset:offset + size]
        fmt = "png" if image.startswith(b"\x89PNG") else "bmp"
        yield {"size": f"{w or 256}x{h or 256}", "bpp": bpp, "bytes": size, "format": fmt, "data": image}

Для иконки выше она выдаст 16x16, 32x32 и 48x48, все в png. Запишите entry["data"] записи PNG в файл .png, и получите этот размер отдельной картинкой. Записи bitmap другие программы прочитают, только если добавить заголовок файла и убрать маску, поэтому их лучше открыть в редакторе иконок. Декодирование подробнее разобрано в статье Base64 в Python.

Если иконка не открывается

• «Похоже на PNG, а не на ICO». Многие строки «favicon» на деле – обычные PNG. Браузеры принимают PNG-favicon под любым именем, но программы, которым нужен настоящий файл иконки, например ресурсы приложений Windows, переименованный PNG не примут. Нажмите Скачать как .png и оставьте его в PNG.
• «Ваш браузер не умеет показывать изображения ICO». Браузер не смог нарисовать ни одного изображения из файла. Обычно запись повреждена, обрезана или использует необычный формат bitmap. Скачанный файл всё равно содержит точные данные; откройте его в редакторе иконок, чтобы увидеть, какая запись не читается.
• Favicon в браузере не меняется. Favicon кешируется отдельно и очень упорно. После замены проверяйте в приватном окне.

Вопросы и ответы