ICO se convierte a PNG extrayendo la imagen raster embebida más grande.ICO es un contenedor de Windows (desde 1985) que empaqueta varios tamaños (16, 32, 48, 64, 128, 256 px). El PNG extraído es una imagen de tamaño fijo editable en cualquier herramienta.
Comparativa ICO vs PNG
| Propiedad | ICO | PNG |
|---|---|---|
| Tipo de formato | Contenedor multi-imagen | Imagen raster única |
| Tamaños embebidos | Múltiples (16, 32, 48, 64, 128, 256 px) | Uno por fichero |
| Compresión | Por entrada: BMP o PNG dentro | DEFLATE (sin pérdida) |
| Canal alfa | Sí (desde Windows XP) | Sí (RGBA) |
| Año de introducción | 1985 (Microsoft Windows 1.0) | 1996 (RFC 2083) |
| Soporte navegador (favicon) | Universal (~100%) | Universal (~100%) |
| Ideal para | Favicons de Windows + iconos de app | Imagen raster genérica |
| Tamaño máximo embebido | 256 × 256 px (moderno) | 2³¹−1 px por lado |
| Extensión de fichero | .ico | .png |
| MIME type | image/vnd.microsoft.icon | image/png |
| Edición en visores | Limitada (herramientas especializadas) | Universal (cualquier editor) |
| Animación | No (usa .ani) | No (usa APNG) |
Conversor ICO a PNG — Honestidad sobre la Decodificación Single-Frame del Navegador
Convierte archivos ICO (contenedor de iconos Microsoft originado con Windows 1.0 en noviembre de 1985 para iconos monocromos de 32x32; contenedor multi-resolución moderno ICONDIR + ICONDIRENTRY según learn.microsoft.com/en-us/previous-versions/ms997538; datos de imagen codificados en PNG añadidos con Windows Vista (RTM 8 de noviembre de 2006; disponibilidad general al consumidor 30 de enero de 2007) para iconos grandes de 256x256) a PNG (W3C Recommendation 10 de noviembre de 2003 / ISO/IEC 15948:2004). La conversión corre localmente vía WHATWG Canvas drawImage + HTMLCanvasElement.toBlob('image/png'). Honestidad sobre lo que el navegador puede hacer — la herramienta delega al decodificador ICO integrado del HTMLImageElement del navegador, que carga exactamente UN bitmap por ICO (el navegador autoselecciona basándose en tamaño de viewport y DPR); el array multi-resolución ICONDIR no está expuesto vía APIs del DOM. La salida es un único PNG a la resolución que el navegador eligió, con transparencia preservada vía 32bpp ARGB. Para extraer cada resolución incrustada de un ICO multi-tamaño necesitarías una herramienta de escritorio con parser ICO propio (IcoFX, Greenfish Icon Editor o un CLI como ImageMagick `convert favicon.ico favicon-%d.png`). Los archivos nunca salen del dispositivo.
Cómo convertir ICO a PNG
- Arrastra un .ico a la herramienta o haz clic para seleccionarlo. Favicons descargados de cualquier web (clic derecho → Guardar imagen como sobre el favicon, o pedir /favicon.ico directamente) sirven como entrada.
- El decodificador ICO integrado del navegador parsea la cabecera ICONDIR, elige un bitmap del array multi-resolución (la heurística varía entre navegadores), decodifica ese bitmap, y la herramienta lo dibuja sobre un canvas a las dimensiones nativas elegidas.
- Previsualiza el resultado — las dimensiones mostradas son las que el navegador eligió del ICO origen (a menudo la mayor disponible, pero no garantizado).
- Si el ICO origen contiene varias resoluciones y necesitas una ESPECÍFICA (no la autoseleccionada), usa una herramienta de escritorio con parser ICO real — ImageMagick `convert favicon.ico favicon-%d.png` extrae todos los frames.
- Pulsa Descargar para guardar el PNG. El ICO original queda intacto en el disco — los archivos nunca salen del dispositivo.
Casos de uso comunes
- Extraer un favicon del /favicon.ico de una web para un mood board de diseño o auditoría de marca (una muestra a una sola resolución basta para inspección visual).
- Convertir un archivo de recursos .ico Windows de una sola resolución a PNG para un proyecto Electron o web multiplataforma.
- Producir una muestra PNG de un ICO multi-resolución cuando solo necesitas el tamaño autoseleccionado (favicon de pestaña, icono de marcador).
- Hacer backup del frame ICO mayor como PNG para archivado antes de retirar un icono Windows legacy de escritorio.
- Confirmar que un archivo ICO es estructuralmente válido (decodifica con éxito a un bitmap visualizable) sin abrir un editor de iconos dedicado.
Preguntas frecuentes
¿La herramienta extrae cada resolución incrustada de un ICO multi-tamaño?
No — la herramienta extrae UN frame, la resolución que el navegador autoseleccionó al decodificar el ICO vía HTMLImageElement. El DOM no expone ninguna API para enumerar entradas ICONDIRENTRY o elegir resoluciones específicas; solo un bitmap llega a Canvas.drawImage. Para extracción multi-frame total (cada tamaño incrustado a un PNG separado), usa una herramienta de escritorio con parser ICO propio: ImageMagick `convert favicon.ico favicon-%d.png` saca todos los frames como secuencia PNG numerada; IcoFX y Greenfish Icon Editor tienen GUIs para lo mismo. Librerías JS como `icojs` incluyen un parser ICO propio pero añadirían ~30 KB al bundle por un caso de uso que se reduce (los favicons modernos usan PNG/SVG declarado vía `<link rel='icon' sizes='WxH'>` según WHATWG HTML).
¿Qué resolución elige el navegador de un ICO multi-tamaño?
Depende del navegador y del contexto. Chrome/Edge típicamente eligen el mayor tamaño disponible (o 32x32 para el caso de uso favicon de pestaña). Firefox y Safari tienen sus propias heurísticas. No hay regla definida en la spec; la heurística varía y puede cambiar entre versiones de navegador. Si necesitas una elección de resolución determinista, usa una herramienta ICO de escritorio — la autoselección del navegador es no-determinista por diseño.
¿Se preserva la transparencia?
Sí, cuando el frame ICO elegido lleva alfa. Los frames ICO codificados en PNG (formato recomendado por Microsoft para 256x256 desde Windows Vista 2006-2007) traen ARGB nativo de 32bpp; los frames estilo BMP llevan alfa vía una AND-mask de 1 bit añadida después de los datos de color. El decodificador del navegador maneja ambas vías y Canvas.drawImage preserva el alfa al PNG de salida (que usa alfa de 8 bits por píxel RGBA).
¿Puedo reconstruir un ICO desde PNGs con la herramienta hermana?
Más o menos — la herramienta png-to-ico de esta suite produce un PNG de una sola resolución dimensionado para uso como favicon (apto para declaraciones `<link rel='icon' sizes='WxH' type='image/png'>` según WHATWG HTML), NO un contenedor ICO multi-resolución real. Construir un contenedor ICO real con varias resoluciones incrustadas requiere un encoder JS propio que escriba la cabecera ICONDIR + entradas ICONDIRENTRY + bloques de datos de imagen concatenados. La práctica moderna de favicon (según WHATWG / guía favicon de Google web.dev) prefiere PNG/SVG declarado sobre ICO multi-resolución.
¿Se sube mi archivo?
No. La decodificación + dibujo en canvas + codificación PNG corren todos del lado cliente vía WHATWG Canvas drawImage + HTMLCanvasElement.toBlob('image/png'). La pestaña Network de DevTools muestra cero peticiones de subida durante la conversión.
Estructura interna del contenedor ICO + realidad de decodificación single-frame del navegador
ICO es estructuralmente un contenedor multi-resolución, no un formato de imagen única: una cabecera ICONDIR de 6 bytes (idReserved=0, idType=1, idCount=N) seguida de un array de N × 16 bytes de estructuras ICONDIRENTRY (cada una con bWidth, bHeight, bColorCount, wPlanes, wBitCount, dwBytesInRes, dwImageOffset), después un bloque contiguo de N bitmaps. Cada bitmap puede ser BMP tradicional (DIB sin el BITMAPFILEHEADER, desde Windows 1.0 1985) o — desde Windows Vista (RTM 8 de noviembre de 2006; disponibilidad general al consumidor 30 de enero de 2007) — un archivo PNG íntegro (con cabecera incluida) en formato 32bpp ARGB. Microsoft recomienda almacenar los iconos grandes de 256x256 como PNG comprimido para mantener el tamaño de archivo razonable. La advertencia de decodificación del navegador es la limitación práctica con la que chocan los usuarios: HTMLImageElement (la vía usada cuando ICO carga vía `<img src='favicon.ico'>` o `<link rel='icon' href='favicon.ico'>`) y la vía Canvas drawImage exponen solo UN bitmap por carga ICO. El navegador parsea ICONDIR, elige una entrada según contexto (viewport, DPR, tamaños disponibles — las heurísticas difieren entre Chrome / Firefox / Safari / Edge), decodifica ese único bitmap y descarta el resto. El DOM no expone ninguna API para enumerar entradas ICONDIRENTRY o extraer resoluciones específicas. Esta herramienta produce un PNG de la resolución que el navegador autoseleccionó. Para extracción multi-frame total (cada tamaño incrustado a un PNG separado), usa una herramienta de escritorio con parser ICO real: ImageMagick (`convert favicon.ico favicon.png` extrae todos los frames como secuencia PNG numerada), IcoFX, Greenfish Icon Editor, o una de las librerías JS que incluyen un parser ICO propio (`icojs`, `to-ico` — añadirían ~30 KB al bundle por un caso de uso que se reduce). La práctica moderna de favicon ha migrado del ICO multi-resolución hacia PNG/SVG declarado vía `<link rel='icon' sizes='WxH' type='image/png'>` (según WHATWG HTML Living Standard), así que el caso de uso ICO multi-frame está disminuyendo.
- Origen ICO decodificado según el formato contenedor de Microsoft Windows 1.0 (noviembre de 1985) con soporte de datos de imagen codificados en PNG desde Vista (30 de enero de 2007)
- Decodificación ICO nativa del navegador vía HTMLImageElement (Chrome, Firefox, Safari, Edge todos soportados)
- Salida single-frame — el navegador autoselecciona una resolución del ICO multi-tamaño según heurísticas de viewport / DPR
- Honestidad sobre el alcance — para extracción multi-frame total (cada resolución incrustada a un PNG separado), usa una herramienta de escritorio como ImageMagick o IcoFX
- Salida PNG según W3C Recommendation 10 de noviembre de 2003 / ISO/IEC 15948:2004 con profundidad de color de 24 bits + canal alfa de 8 bits preservado vía Canvas
- Transparencia llevada sin pérdida cuando el frame ICO elegido es 32bpp ARGB (formato Vista PNG-encoded) o BMP+AND-mask
- En el navegador vía WHATWG Canvas drawImage + HTMLCanvasElement.toBlob('image/png') — sin subida
- Opera en sRGB (IEC 61966-2-1:1999) a precisión de 8 bits; los datos bitmap del ICO se interpretan como sRGB por el decodificador del navegador
Gratis. Sin registro. Sin subidas. Anuncios mediante AdSense (con consentimiento).
Fuentes (7)
- Microsoft Corporation (1985). ICO Icon File Format — ICONDIR + ICONDIRENTRY container structure. learn.microsoft.com/en-us/previous-versions/ms997538(v=msdn.10) — ICO format originated with Windows 1.0 (released 20 November 1985) for 32x32 monochrome icons; modern ICO is a multi-resolution container with a 6-byte ICONDIR header (idReserved=0, idType=1, idCount=N), an array of N × 16-byte ICONDIRENTRY structures (bWidth / bHeight / bColorCount / wPlanes / wBitCount / dwBytesInRes / dwImageOffset), and a contiguous block of N image bitmaps (BMP-style or, since Windows Vista 2006-2007, PNG-encoded).
- Microsoft Corporation (2006). ICO PNG-encoded image data (Windows Vista large icons). devblogs.microsoft.com/oldnewthing/20101022-00 (Raymond Chen, 22 October 2010) + axialis.com/tutorials/tutorial-vistaicons.html — Windows Vista (RTM 8 November 2006; general consumer availability 30 January 2007) introduced 256x256 large icons stored as PNG-compressed image data inside the ICO container in 32bpp ARGB format; the entire PNG file (header included) is embedded in place of the BMP block; backwards compatible with XP for the legacy 48/32/16 sizes.
- Shyam, B. (Microsoft Corporation) (1999). favicon.ico convention introduced in Internet Explorer 5. thehistoryoftheweb.com/how-we-got-the-favicon — Bharat Shyam at Microsoft introduced the favicon convention shipped with Internet Explorer 5 (released 18 March 1999) while working on the IE Favorites feature; the convention places favicon.ico at the site root and is auto-fetched by browsers regardless of any <link> declaration.
- WHATWG (live). HTML Living Standard — HTMLImageElement (browser-native ICO decoding limitations). html.spec.whatwg.org/#htmlimageelement — ICO is natively decoded by every modern browser (Chrome, Firefox, Safari, Edge) via their built-in ICO decoder + favicon registry. Critical limitation: the DOM exposes only ONE bitmap per ICO load (the browser auto-picks based on viewport / DPR / available sizes); the ICONDIR multi-resolution array is not exposed via DOM APIs. To extract every embedded resolution, a custom JS ICO parser is required (parse ICONDIR + ICONDIRENTRY array + extract each image data block separately).
- WHATWG (live). HTML Living Standard — Canvas 2D Context: drawImage() + toBlob('image/png'). html.spec.whatwg.org/#dom-context-2d-drawimage + canvas section 4.12.5 — browser conversion mechanism: load ICO into HTMLImageElement (decoder picks one resolution) → drawImage onto canvas at native dimensions → toBlob('image/png') with full 24-bit colour and alpha preservation; lossless from the decoded pixels.
- W3C (PNG Working Group) (2003). Portable Network Graphics (PNG) Specification (Second Edition). W3C Recommendation 10 November 2003 / ISO/IEC 15948:2004 — target lossless raster format with full 24-bit colour depth + 8-bit alpha channel; the standard ICO contained format since Windows Vista 2007.
- International Electrotechnical Commission (IEC) (1999). Multimedia systems and equipment — Colour measurement and management — Part 2-1: Default RGB colour space — sRGB. IEC 61966-2-1:1999 — default 8-bit RGB colour space the Canvas 2D path operates in; ICO bitmap data is interpreted as sRGB by the browser decoder during the load step.
Son las especificaciones del W3C, ISO/IEC, ITU-T e IETF que la herramienta implementa o sobre las que se apoya. Localízalas en w3.org, iso.org, itu.int o datatracker.ietf.org.
Por Marco B. ·