Saltar al contenido

ICO · 5 archivos ICO de muestra disponibles

Descargar archivos ICO de muestra

Descarga archivos ICO de muestra gratuitos, incluidos favicons web multirresolución, suites de iconos para aplicaciones Windows, recursos retina y DIB clásicos.

5 archivos ICO de muestra disponibles 16×16 a 256×256 · Multirresolución y PNG/DIB Formato estándar de favicon e iconos de app

Suite de pruebas ICO

Archivos ICO de muestra gratuitos para descargar

5 archivos ICO de muestra disponibles

sample-ico-favicon-multi-res-16-32-48.ico

sample-ico-favicon-multi-res-16-32-48.ico

Dimensiones:16×16, 32×32, 48×48

4,9 KB

ICO Descargar muestra ICO
sample-ico-app-complete-16-to-256.ico

sample-ico-app-complete-16-to-256.ico

Dimensiones:16×16 to 256×256

20,3 KB

ICO Descargar muestra ICO

Especificación técnica y guía

Arquitectura del formato ICO, estándares de favicon y especificaciones de contenedor

El formato de icono de Microsoft Windows (.ico) es un contenedor de imágenes diseñado para agrupar múltiples mapas de bits y archivos PNG comprimidos en diversas resoluciones, profundidades de color y paletas dentro de un único archivo. Introducido en Windows 1.0 (1985) y adoptado como estándar universal de favicon por Internet Explorer 5 en 1999, ICO sigue siendo la base para la iconografía del sistema y la identidad en pestañas de navegadores web.

Evolución desde Windows 1.0 hasta Windows Vista y los favicons web modernos

Introducido en 1985 con Microsoft Windows 1.0, el formato ICO contenía mapas de bits monocromáticos fijos (1 bit, 32×32 píxeles). Con Windows 3.0 y 95, las paletas se ampliaron a 16 colores (EGA de 4 bits) y 256 colores (VGA de 8 bits), incorporando una máscara AND de transparencia de 1 bit junto a la matriz de color XOR.

En Windows XP (2001), Microsoft introdujo iconos RGBA de 32 bits con canal alfa real de 8 bits (256 niveles de sombreado suave y suavizado de bordes) empaquetados en estructuras DIB (Device-Independent Bitmap).

Windows Vista (2006) introdujo la modernización más relevante: la compresión PNG nativa dentro del contenedor ICO para elementos de 256×256 píxeles de alta densidad. Esto redujo el tamaño de varios megabytes a decenas de kilobytes manteniendo compatibilidad con subimágenes DIB anteriores.

En la web, Internet Explorer 5 (marzo de 1999) introdujo la convención /favicon.ico en la raíz del servidor. Estandarizado por W3C y WHATWG, los navegadores solicitan automáticamente /favicon.ico para mostrarlo en pestañas, marcadores y accesos directos móviles.

Arquitectura binaria: ICONDIR, ICONDIRENTRY y codificación de carga

Un archivo ICO comienza con un encabezado de 6 bytes (ICONDIR): dos bytes cero reservados (0x0000), un especificador de tipo de 2 bytes (0x0001 para ICO, 0x0002 para cursor .cur) y un entero de 2 bytes que indica la cantidad total de subimágenes (idCount).

Inmediatamente después del encabezado se encuentra un array contiguo de entradas de directorio de 16 bytes (ICONDIRENTRY). Cada entrada especifica ancho (1 byte; 0 representa 256 px), alto (1 byte; 0 representa 256 px), cantidad de colores (1 byte), byte reservado (0x00), planos de color (2 bytes), bits por píxel (2 bytes, ej. 32 para RGBA), tamaño en bytes de la imagen (4 bytes) y desplazamiento absoluto en el archivo (4 bytes).

Las subimágenes siguen dos formatos binarios: DIB clásico o secuencias PNG. En iconos DIB, la subimagen comienza con un BITMAPINFOHEADER de 40 bytes donde biHeight es exactamente el doble de la altura visual (altura * 2) para alojar el mapa de píxeles XOR y la máscara AND de transparencia.

En iconos PNG (estandarizados desde Windows Vista), la carga comienza con la firma PNG de 8 bytes (0x89 0x50 0x4E 0x47 0x0D 0x0A 0x1A 0x0A), seguida de fragmentos estándar IHDR, IDAT e IEND. Esto permite compresión Deflate eficiente para iconos de 256×256, 128×128 y 64×64.

Ventajas clave y características arquitectónicas de ICO

Empaquetado multirresolución: Un único archivo .ico incluye resoluciones específicas para 16×16 (pestaña web / barra de tareas), 32×32 (escritorio / explorador estándar), 48×48 (explorador grande) y 256×256 (retina / vista extra grande), evitando escalados borrosos.

Transparencia alfa real de 8 bits: Los iconos RGBA de 32 bits admiten 256 niveles de opacidad alfa, permitiendo sombras suaves y bordes limpios sobre cualquier fondo claro u oscuro.

Respaldo universal en navegadores: Todos los navegadores web reconocen /favicon.ico de forma nativa sin etiquetas HTML adicionales ni scripts, garantizando compatibilidad absoluta.

Motor de compresión híbrido: Combina decodificación directa DIB para iconos diminutos (16×16 y 32×32) con compresión Deflate PNG para resoluciones mayores.

Compatibilidad con sistemas operativos y software

Microsoft Windows: Soporte nativo en Windows 1.0 hasta Windows 11 para accesos directos de escritorio, recursos ejecutables (.exe, .dll) y barras de títulos.

Navegadores web: Soporte universal en Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge, Opera e Internet Explorer.

Software de diseño: Adobe Photoshop (mediante plugin ICOFormat), GIMP (lectura y escritura nativa), Inkscape, ImageMagick, IcoFX y Axialis IconWorkshop.

Entornos de desarrollo: Compatibilidad en Visual Studio, Electron, Node.js (sharp, png-to-ico), Python (Pillow), Go, Rust y .NET System.Drawing.Icon.

Comparativa técnica de formatos: ICO vs. PNG vs. SVG vs. WebP vs. CUR

Compara las propiedades del contenedor Microsoft ICO frente a formatos rasterizados independientes, gráficos vectoriales y cursores de Windows.

Característica técnicaICO (Contenedor de iconos)PNG (Raster portátil)SVG (Gráfico vectorial)WebP (Raster moderno)CUR (Cursor de Windows)Consideraciones prácticas
Tipo de contenedorContenedor multi-imagen (DIB/PNG)Flujo de imagen únicaDocumento vectorial XMLRaster único/múltiple RIFFContenedor de cursor único/múltipleICO y CUR agrupan múltiples resoluciones distintas en un único archivo.
Soporte de resoluciónMúltiples tamaños fijos (16 a 256 px)Dimensión fija únicaResolución infinitamente escalableDimensión fija únicaMúltiples tamaños fijos (16 a 128 px)SVG escala geométricamente, mientras ICO preserva el dibujo exacto píxel por píxel en 16×16.
Coordenada de punto activoNinguna (ancla centrada)No aplicableNo aplicableNo aplicablePunto activo X/Y (2 bytes c/u)CUR tiene idéntica estructura binaria a ICO excepto tipo=2 y coordenadas de punto activo.
Esquema de compresiónHíbrido (DIB sin comprimir + PNG Deflate)Deflate (ZLIB sin pérdida)Texto plano / Gzip (SVGZ)VP8 / VP8L sin pérdida y con pérdidaFlujo DIB o PNGICO utiliza compresión PNG para marcos de 256×256 desde Windows Vista.
Solicitud automática webSí (/favicon.ico automático)Requiere <link rel="icon">Requiere <link rel="icon">Requiere <link rel="icon">Se invoca mediante propiedad CSS cursorLos navegadores realizan una solicitud HTTP GET implícita a /favicon.ico.
Color y transparencia1 bit, 4 bits, 8 bits, 32 bits RGBATruecolor 24 bits + alfa 8/16 bitsEspacio de color CSS / sRGB / P3RGB de 24 bits + alfa de 8 bitsMáscara de 1 bit o alfa RGBA de 32 bitsTanto ICO como PNG admiten sombras translúcidas suaves de 256 niveles.

Integración para desarrolladores: Favicon HTML, Node.js, Python e ImageMagick

Fragmentos de código listos para producción para declarar favicons en HTML, generar archivos ICO en Node.js con sharp, exportar con Python Pillow y compilar con ImageMagick.

HTML5 Favicon & Web Manifest Declaration:

<!-- Declaración estándar de favicon y manifiesto HTML5 -->
<!-- 1. Compatibilidad universal tradicional (/favicon.ico) -->
<link rel="shortcut icon" href="/favicon.ico" sizes="16x16 32x32 48x48">

<!-- 2. Iconos PNG de alta resolución para pestañas de navegadores modernos -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<!-- 3. Icono vectorial escalable SVG compatible con modo oscuro -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

<!-- 4. Apple Touch Icon para pantalla de inicio en iOS -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- 5. Manifiesto Web App para Chrome Android y aplicaciones PWA -->
<link rel="manifest" href="/site.webmanifest">

Node.js (Sharp & png-to-ico Packaging):

// Node.js: Agrupar buffers PNG en un archivo ICO con png-to-ico y sharp
import { writeFileSync } from 'node:fs';
import pngToIco from 'png-to-ico';
import sharp from 'sharp';

async function generateMultiResIco(masterSvgPath, outputPath) {
  const sizes = [16, 32, 48, 64, 128, 256];
  const pngBuffers = [];

  for (const size of sizes) {
    const buf = await sharp(masterSvgPath)
      .resize(size, size, { fit: 'contain', background: { r: 0, g: 0, b: 0, alpha: 0 } })
      .png({ compressionLevel: 9 })
      .toBuffer();
    pngBuffers.push(buf);
  }

  const icoBuffer = await pngToIco(pngBuffers);
  writeFileSync(outputPath, icoBuffer);
  console.log(`ICO generado: ${outputPath} (${icoBuffer.length} bytes, 6 resoluciones)`);
}

Python (Pillow Multi-Resolution Export):

# Python: Generar un archivo ICO multirresolución con Pillow (PIL)
from PIL import Image

def create_ico(source_path, output_path):
    img = Image.open(source_path).convert("RGBA")
    icon_sizes = [(16, 16), (24, 24), (32, 32), (48, 48), (64, 64), (128, 128), (256, 256)]
    
    img.save(
        output_path,
        format='ICO',
        sizes=icon_sizes
    )
    print(f"ICO guardado en {output_path} con {len(icon_sizes)} tamaños.")

create_ico("master-logo.png", "favicon.ico")

ImageMagick CLI (Multi-Res ICO Compilation):

# ImageMagick CLI: Combinar resoluciones PNG en un único archivo ICO
# 1. Crear fotogramas individuales desde un archivo vectorial
magick master.svg -resize 16x16 icon-16.png
magick master.svg -resize 32x32 icon-32.png
magick master.svg -resize 48x48 icon-48.png
magick master.svg -resize 256x256 icon-256.png

# 2. Empaquetar todos los marcos en un contenedor ICO multirresolución
magick convert icon-16.png icon-32.png icon-48.png icon-256.png favicon.ico

# 3. Inspeccionar marcos internos con identify
identify favicon.ico

Especificaciones técnicas detalladas

Parámetros técnicos, bytes mágicos y estándares de codificación que rigen el formato Microsoft Windows ICO.

Nombre del formato
Icono de Microsoft Windows (ICO)
Extensiones estándar
.ico
Tipos MIME
image/x-icon, image/vnd.microsoft.icon, image/ico
Lanzamiento inicial
1985 (Windows 1.0) · 1999 (IE5 Favicon) · 2006 (Vista PNG)
Encabezado de estructura
ICONDIR de 6 bytes (Reservado 0x0000, Tipo 0x0001, Total imágenes)
Entrada de directorio
ICONDIRENTRY de 16 bytes (Ancho, Alto, Colores, Planos, BPP, Tamaño, Offset)
Formatos admitidos
Windows DIB (BITMAPINFOHEADER + XOR/AND) o flujo PNG
Resoluciones estándar
16×16, 24×24, 32×32, 48×48, 64×64, 128×128, 256×256 px
Profundidades de color
Monocromo de 1 bit, 4 bits (16 col), 8 bits (256 col), 24 bits RGB, 32 bits RGBA
Transparencia
Máscara booleana AND de 1 bit o canal alfa real de 8 bits (256 niveles)
Estandarización web
Estándar Favicon W3C HTML5 y WHATWG (solicitud automática /favicon.ico)
Usos principales
Favicons web, accesos directos de Windows, recursos ejecutables Win32

Preguntas frecuentes sobre archivos ICO

¿Qué es un archivo ICO y por qué contiene múltiples resoluciones?

Un archivo ICO es un contenedor de imágenes diseñado por Microsoft para almacenar múltiples versiones de un mismo icono en distintas resoluciones y profundidades de color dentro de un solo archivo. Por ejemplo, un favicon.ico puede incluir 16×16 px para pestañas de navegador, 32×32 px para accesos directos y 256×256 px para pantallas de alta densidad. Al empaquetar versiones pre-diseñadas para cada tamaño, el sistema operativo y el navegador evitan interpolaciones borrosas, asegurando máxima nitidez.

¿Cuál es la diferencia entre un ICO DIB clásico y un ICO comprimido con PNG?

Los archivos ICO clásicos codifican cada marco como mapa de bits independiente del dispositivo (DIB), que consta de un BITMAPINFOHEADER de 40 bytes, una matriz de color XOR sin comprimir y una máscara AND de transparencia de 1 bit. Aunque es eficiente para 16×16 y 32×32, una imagen DIB de 256×256 ocupa 262 KB por fotograma. Desde Windows Vista (2006), la especificación permite incluir secuencias PNG comprimidas con Deflate, reduciendo el tamaño a 10–20 KB con transparencia alfa de 8 bits completa.

¿Los sitios web modernos deben seguir usando favicon.ico o migrar a SVG y PNG?

Los sitios web modernos deben usar ambos. Aunque los navegadores actuales admiten SVG y PNG mediante `<link rel="icon">`, miles de navegadores corporativos, agregadores RSS, lectores de marcadores e indexadores de motores de búsqueda solicitan automáticamente `/favicon.ico` en la raíz del servidor. Contar con un archivo `favicon.ico` multirresolución evita errores 404 en el servidor y garantiza compatibilidad universal.

¿Cómo selecciona Windows qué resolución de icono mostrar?

Cuando Windows renderiza un icono, el motor del shell calcula los píxeles físicos exactos requeridos según el nivel de escala DPI del monitor (100%, 125%, 150% o 200%). Recorre la tabla ICONDIRENTRY en el archivo ICO buscando una coincidencia exacta. Si la encuentra, la dibuja directamente. Si no existe una coincidencia exacta, selecciona el marco superior más cercano y lo reduce mediante filtrado bicúbico para mantener la nitidez.

¿Qué diferencia hay entre los archivos .ico (icono) y .cur (cursor)?

ICO y CUR comparten una estructura binaria casi idéntica, con dos diferencias esenciales: Primero, el byte 2 del encabezado define el tipo (0x0001 para ICO y 0x0002 para CUR). Segundo, en la entrada de 16 bytes, los bytes 4–7 definen planos de color y bits por píxel en un ICO, mientras que en un CUR indican las coordenadas X e Y del punto activo (hotspot), que es el punto exacto donde se registra el clic del ratón.

← Explorar otros formatos de imagen