sample-ico-favicon-multi-res-16-32-48.ico
Dimensiones:16×16, 32×32, 48×48
4,9 KB
ICO Descargar muestra ICOICO · 5 archivos ICO de muestra disponibles
Descarga archivos ICO de muestra gratuitos, incluidos favicons web multirresolución, suites de iconos para aplicaciones Windows, recursos retina y DIB clásicos.
Suite de pruebas ICO
5 archivos ICO de muestra disponibles
sample-ico-favicon-multi-res-16-32-48.ico
Dimensiones:16×16, 32×32, 48×48
4,9 KB
ICO Descargar muestra ICOsample-ico-app-complete-16-to-256.ico
Dimensiones:16×16 to 256×256
20,3 KB
ICO Descargar muestra ICOsample-ico-high-res-256x256.ico
Dimensiones:256×256
10 KB
ICO Descargar muestra ICOsample-ico-standard-32x32.ico
Dimensiones:32×32
1,4 KB
ICO Descargar muestra ICOsample-ico-classic-dib-32x32.ico
Dimensiones:32×32
4,2 KB
ICO Descargar muestra ICOEspecificación técnica y guía
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.
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.
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.
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.
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.
Compara las propiedades del contenedor Microsoft ICO frente a formatos rasterizados independientes, gráficos vectoriales y cursores de Windows.
| Característica técnica | ICO (Contenedor de iconos) | PNG (Raster portátil) | SVG (Gráfico vectorial) | WebP (Raster moderno) | CUR (Cursor de Windows) | Consideraciones prácticas |
|---|---|---|---|---|---|---|
| Tipo de contenedor | Contenedor multi-imagen (DIB/PNG) | Flujo de imagen única | Documento vectorial XML | Raster único/múltiple RIFF | Contenedor de cursor único/múltiple | ICO y CUR agrupan múltiples resoluciones distintas en un único archivo. |
| Soporte de resolución | Múltiples tamaños fijos (16 a 256 px) | Dimensión fija única | Resolución infinitamente escalable | Dimensión fija única | Mú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 activo | Ninguna (ancla centrada) | No aplicable | No aplicable | No aplicable | Punto 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ón | Híbrido (DIB sin comprimir + PNG Deflate) | Deflate (ZLIB sin pérdida) | Texto plano / Gzip (SVGZ) | VP8 / VP8L sin pérdida y con pérdida | Flujo DIB o PNG | ICO utiliza compresión PNG para marcos de 256×256 desde Windows Vista. |
| Solicitud automática web | Sí (/favicon.ico automático) | Requiere <link rel="icon"> | Requiere <link rel="icon"> | Requiere <link rel="icon"> | Se invoca mediante propiedad CSS cursor | Los navegadores realizan una solicitud HTTP GET implícita a /favicon.ico. |
| Color y transparencia | 1 bit, 4 bits, 8 bits, 32 bits RGBA | Truecolor 24 bits + alfa 8/16 bits | Espacio de color CSS / sRGB / P3 | RGB de 24 bits + alfa de 8 bits | Máscara de 1 bit o alfa RGBA de 32 bits | Tanto ICO como PNG admiten sombras translúcidas suaves de 256 niveles. |
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.icoParámetros técnicos, bytes mágicos y estándares de codificación que rigen el formato Microsoft Windows ICO.
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.
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 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.
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.
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.