Base64 a ICO

Cómo convertir Base64 a ICO

1. Pega el Base64, una URI data:image/x-icon;base64,... o la etiqueta <link rel="icon" href="data:..."> completa.
2. Comprueba que la línea de estado dice Detectado ICO y mira la vista previa.
3. Pulsa Descargar archivo. El nombre por defecto es decoded.ico; cámbialo a favicon si va a ir en un sitio web.

El campo Tipo MIME muestra image/x-icon, el tipo que usan para los iconos la mayoría de servidores y data URI.

Un archivo ICO contiene varias imágenes

A diferencia de PNG o JPEG, un archivo ICO es un pequeño contenedor. Un favicon.ico típico contiene versiones de 16×16, 32×32 y 48×48, y los iconos de aplicaciones de Windows suelen añadir 256×256. Windows elige el mejor tamaño para la barra de tareas, un acceso directo del escritorio o el Explorador; los navegadores eligen uno para la pestaña.

El archivo empieza con un encabezado de 6 bytes y después una entrada de directorio de 16 bytes por imagen. Por eso el Base64 de cualquier ICO empieza por AAABAA, que son los bytes 00 00 01 00. Este es el Mostrar volcado hex de un icono con tres tamaños:

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

Las dos entradas siguientes describen 32×32 (20 20) y 48×48 (30 30). En el desplazamiento 54 empieza la primera imagen, y el .PNG de la columna de texto muestra que está guardada como PNG.

PNG o BMP dentro

Cada imagen de un ICO se guarda o bien como un archivo PNG completo o bien como un bitmap sin el encabezado de archivo BM habitual. En el segundo caso sus datos empiezan por 28 00 00 00, y la altura en ese encabezado de bitmap está duplicada, porque tras los píxeles de color viene una máscara de transparencia de 1 bit. Las imágenes grandes de 256×256 suelen ser PNG, ya que un bitmap de 32 bits sin comprimir de ese tamaño ocupa más de 256 KB.

Una cadena ICO suele ser mucho más larga de lo que aparenta el icono, porque contiene todos los tamaños y las entradas de bitmap no van comprimidas. Para un sitio web, un único PNG de 32×32 o un favicon SVG suele ocupar mucho menos. Favicon a Base64 explica cómo incrustarlos.

Listar y extraer las imágenes en código

Esta función de Python lee el directorio y devuelve cada imagen con su tamaño y su 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 el icono anterior devuelve 16x16, 32x32 y 48x48, todos png. Escribe el entry["data"] de una entrada PNG en un archivo .png y tendrás ese tamaño como imagen independiente. Las entradas de bitmap necesitan un encabezado de archivo y quitar la máscara antes de que otro software pueda leerlas, así que en ese caso abre el ICO en un editor de iconos. Base64 en Python explica más sobre la decodificación.

Cuando el icono no se abre

• «Esto parece PNG, no ICO». Muchas cadenas de «favicon» son simples PNG. Los navegadores aceptan un favicon PNG con cualquier nombre, pero el software que necesita un archivo de icono de verdad, como los recursos de aplicaciones de Windows, no acepta un PNG renombrado. Usa Descargar como .png y déjalo como PNG.
• «Tu navegador no puede mostrar imágenes ICO». El navegador no pudo dibujar ninguna imagen del archivo, normalmente porque una entrada está dañada o truncada o usa un formato de bitmap poco habitual. La descarga sigue siendo exactamente los datos originales; ábrela en un editor de iconos para ver qué entrada falla.
• El favicon no cambia en el navegador. Los navegadores guardan los favicons en una caché propia, así que comprueba el icono nuevo en una ventana privada.

Preguntas frecuentes