Formato ICO: Guía Técnica Completa de Archivos de Icono de Windows

ICO: Formato de Icono de Windows para Escritorio y Web

El formato ICO (Icon) es el contenedor de icono nativo de Windows—un directorio de entradas de imagen, cada una con dimensiones, profundidad de color y compresión independientes. A pesar de ser un formato de los años 80, ICO sigue siendo relevante hoy como estándar de facto de favicon (aunque los navegadores modernos prefieren PNG, SVG y WebP). Entender la estructura ICO es esencial para optimización de favicon, software Windows heredado y bibliotecas de iconos multiplataforma.

Estructura de Archivo ICO: Encabezado de Directorio de Icono

Cada archivo ICO comienza con un encabezado de 6 bytes:

[Reservado: 2 bytes (0x0000)]
[Tipo: 2 bytes (0x0001 = ICO, 0x0002 = CUR)]
[Conteo: 2 bytes (número de imágenes)]

Seguido de un arreglo de entradas de directorio (16 bytes cada una):

[Ancho: 1 byte (0–255; 0 = 256)]
[Alto: 1 byte (0–255; 0 = 256)]
[Conteo Color: 1 byte (0 = color verdadero, >0 = tamaño paleta indexada)]
[Reservado: 1 byte (0x00)]
[Planos Color: 2 bytes (siempre 1 para ICO)]
[Bits Por Píxel: 2 bytes (1, 4, 8, 24, 32)]
[Tamaño: 4 bytes (tamaño datos imagen en bytes)]
[Desplazamiento: 4 bytes (desplazamiento byte a datos imagen)]

Ejemplo: Icono RGBA único de 32×32:

00 00          (reservado)
01 00          (tipo = icono)
01 00          (conteo = 1)
20 20 00 00 01 00 20 00    (32×32, color verdadero, 32-bit)
XX XX XX XX    (tamaño datos imagen)
16 00 00 00    (desplazamiento a datos = 22 bytes después encabezado)

Profundidades de Color y Planos de Bits: De 1-Bit a 32-Bit RGBA

ICO soporta múltiples profundidades de color en un único archivo:

Máscaras AND y XOR: Modelo de Transparencia Heredado

Archivos ICO pre-32-bit usan dos máscaras separadas para transparencia:

• Máscara AND: Opaco (0) / Transparente (1) por píxel (1-bit)
• Máscara XOR: Datos imagen visible (1-, 4-, 8- o 24-bit)

Combinadas, producen el icono final usando mezcla XOR con fondo de pantalla—una técnica de la era 8086. Herramientas modernas (Photoshop, ImageMagick) manejan esto automáticamente; comprenderlo es principalmente histórico.

Tamaños de Icono Estándar: Convenciones de Windows

Las convenciones de Windows y web dictan estos tamaños por caso de uso:

Los favicons modernos incluyen múltiples entradas: 16×16, 32×32, 48×48, 256×256 en un único ICO.

ICO Moderno: De Máscaras AND/XOR a PNG Comprimido

ICO tradicional usa datos bitmap sin procesar; herramientas modernas comprimen usando PNG internamente:

[Encabezado Directorio Icono]
[Entradas Directorio Icono]
[Datos Imagen 1 Sin Procesar u Comprimido PNG]
[Datos Imagen 2 Sin Procesar u Comprimido PNG]
...

Windows Vista+ y navegadores modernos soportan entradas ICO comprimidas PNG—mismos datos, pero envueltos en chunks IHDR/IDAT de PNG dentro del contenedor ICO. Esto reduce tamaño archivo en 50–70% (especialmente para iconos con transparencia) manteniendo compatibilidad hacia atrás.

Detección de ejemplo: Si datos imagen comienzan con PNG: 89 50 4E 47... (magia PNG), herramientas cambian a descompresión PNG; si no, bitmap sin procesar.

Implementación de Favicon: De ICO a Estándares Modernos

Enfoque heredado (ICO único):

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">

Navegador descarga favicon.ico, extrae tamaño óptimo por DPI de pantalla. Funciona en todas partes pero ineficiente (navegadores cargan ICO completo).

Enfoque moderno (múltiples formatos):

<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Navegadores cargan solo el formato que soportan en resolución requerida. SVG para escalabilidad infinita, PNG para respaldo.

Creación de Archivos ICO: ImageMagick, Python, Herramientas En Línea

ImageMagick (convertir múltiples capas PNG a ICO):

# Imagen única → ICO (ImageMagick auto-dimensiona para favicon)
convert entrada.png -define icon:auto-resize=256,128,96,64,48,32,16 salida.ico

# Tamaños específicos múltiples
convert entrada.png -resize 16x16 -define icon:auto-resize=16 favicon-16.ico
convert entrada.png -resize 32x32 -define icon:auto-resize=32 favicon-32.ico

Python (PIL/Pillow):

from PIL import Image

img = Image.open('logo.png').convert('RGBA')

# Crear ICO con múltiples tamaños
tamaños = [(16, 16), (32, 32), (48, 48), (64, 64), (128, 128), (256, 256)]
img_redimensionada = [img.resize(tamaño, Image.Resampling.LANCZOS) for tamaño in tamaños]
img_redimensionada[0].save('favicon.ico', format='ICO', sizes=tamaños)

Creación de favicon por lotes (ImageMagick):

for tamaño in 16 32 48 64 128 256; do
  convert fuente.png -resize ${tamaño}x${tamaño} \
    -background none -gravity center \
    favicon-${tamaño}x${tamaño}.png
done
convert favicon-16x16.png favicon-32x32.png favicon-48x48.png \
  favicon-64x64.png favicon-128x128.png favicon-256x256.png favicon.ico

ICO vs PNG, SVG, ICNS (macOS), Mejores Prácticas de Favicon

Cuándo Elegir ICO

• Software Windows heredado: Aún el estándar para iconos de aplicación .exe
• Compatibilidad máxima del navegador: Funciona en IE5, navegadores antiguos
• Favicons multi-tamaño: Archivo único contiene 16×16, 32×32, 256×256, etc.
• Bibliotecas de iconos multiplataforma: Windows + respaldo para sistemas heredados
• Evitar ICO si: Web moderno (usar SVG + PNG), macOS (ICNS), crítico rendimiento (PNGs individuales cargan más rápido)

Recomendación moderna: Usar ICO como respaldo; priorizar SVG para escalabilidad infinita y ancho de banda mínimo.

Conversiones relacionadas

Conversiones frecuentes del catálogo:

• JPG a PNG
• MP4 a MP3
• PDF a DOCX
• PNG a JPG
• MP3 a WAV
• DOCX a PDF