Base64 para ICO

Como converter Base64 para ICO

1. Cole o Base64, um URI data:image/x-icon;base64,... ou a tag <link rel="icon" href="data:..."> inteira.
2. Confira se a linha de status mostra Detectado ICO e olhe a prévia.
3. Clique em Baixar arquivo. O nome padrão é decoded.ico; renomeie para favicon se ele for para um site.

O campo Tipo MIME mostra image/x-icon, o tipo que a maioria dos servidores e data URIs usa para ícones.

Arquivos ICO guardam várias imagens

Diferente de PNG ou JPEG, um arquivo ICO é um pequeno contêiner. Um favicon.ico típico guarda versões de 16×16, 32×32 e 48×48, e ícones de aplicativos do Windows muitas vezes acrescentam 256×256. O Windows escolhe o melhor tamanho para a barra de tarefas, um atalho na área de trabalho ou o Explorer; os navegadores escolhem um para a aba.

O arquivo começa com um cabeçalho de 6 bytes e depois uma entrada de diretório de 16 bytes por imagem. Por isso o Base64 de todo ICO começa com AAABAA, que são os bytes 00 00 01 00. Este é o Mostrar dump hex de um ícone com três tamanhos:

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......|

As duas entradas seguintes descrevem 32×32 (20 20) e 48×48 (30 30). No offset 54 começa a primeira imagem, e o .PNG na coluna de texto mostra que ela está gravada como PNG.

PNG ou BMP por dentro

Cada imagem de um ICO é gravada como um arquivo PNG completo ou como um bitmap sem o cabeçalho de arquivo BM habitual. No segundo caso, os dados começam com 28 00 00 00, e a altura nesse cabeçalho de bitmap é dobrada, porque uma máscara de transparência de 1 bit vem depois dos pixels coloridos. Imagens grandes de 256×256 costumam ser PNG, já que um bitmap de 32 bits sem compressão nesse tamanho ocupa mais de 256 KB.

Uma string ICO muitas vezes é bem mais longa do que o ícone aparenta, porque todos os tamanhos estão nela e as entradas em bitmap não têm compressão. Para um site, um único PNG de 32×32 ou um favicon SVG costuma ser bem menor. Favicon para Base64 explica como embuti-los.

Listar e extrair as imagens no código

Esta função em Python lê o diretório e devolve cada imagem com tamanho e formato:

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}

Para o ícone acima, ela devolve 16x16, 32x32 e 48x48, todos png. Grave o entry["data"] de uma entrada PNG em um arquivo .png e você tem aquele tamanho como imagem independente. Entradas em bitmap precisam de um cabeçalho de arquivo e da remoção da máscara antes que outros programas consigam lê-las; para essas, abra o ICO em um editor de ícones. Base64 em Python tem mais sobre decodificação.

Quando o ícone não abre

• “Isto parece ser PNG, não ICO”. Muitas strings de “favicon” são PNGs comuns. Os navegadores aceitam um favicon PNG com qualquer nome, mas programas que precisam de um arquivo de ícone de verdade, como os recursos de aplicativos do Windows, não aceitam um PNG renomeado. Use Baixar como .png e mantenha como PNG.
• “Seu navegador não consegue exibir imagens ICO”. O navegador não conseguiu desenhar nenhuma imagem do arquivo, normalmente porque uma entrada está danificada ou truncada, ou usa um formato de bitmap incomum. O download continua sendo exatamente os dados; abra em um editor de ícones para ver qual entrada falha.
• O favicon não muda no navegador. Os navegadores guardam os favicons num cache próprio, então confira o ícone novo em uma janela anônima.

Perguntas frequentes