PNG se convierte a ICO empaquetando la imagen en varias resoluciones dentro de un contenedor.Genera tamaños embebidos 16, 32, 48, 64, 128, 256 px — el navegador/SO elige el adecuado en tiempo de ejecución. Usa ICO como favicon.ico canónico en la raíz del sitio; los navegadores modernos también aceptan favicons PNG.
Comparativa PNG vs ICO
| Propiedad | PNG | ICO |
|---|---|---|
| Tipo de formato | Imagen raster única | Contenedor multi-imagen |
| Tamaños embebidos | Uno por fichero | Múltiples (16, 32, 48, 64, 128, 256 px) |
| Compresión | DEFLATE (sin pérdida) | Por entrada: BMP o PNG dentro |
| Canal alfa | Sí (RGBA) | Sí (desde Windows XP) |
| Año de introducción | 1996 (RFC 2083) | 1985 (Microsoft Windows 1.0) |
| Soporte navegador (favicon) | Universal (~100%, todos los navegadores ≥ IE11) | Universal (~100%) |
| Ideal para | Imagen raster genérica | Favicons de Windows + iconos de app |
| Tamaño máximo embebido | 2³¹−1 px por lado | 256 × 256 px (moderno) |
| Extensión de fichero | .png | .ico |
| MIME type | image/png | image/vnd.microsoft.icon |
| Requerido para IE legacy | No (favicon PNG funciona IE11+) | Sí (IE ≤10 sólo lee ICO) |
| Empaquetado multi-resolución | No (un tamaño por fichero) | Sí (el navegador elige) |
Conversor PNG a Favicon ICO Multi-Resolución — Salida ICO Container Real
Empaqueta un PNG cuadrado en un favicon.ico multi-resolución real que contiene los seis tamaños de icono estándar (16, 32, 48, 64, 128, 256 píxeles) en un único contenedor ICO de Microsoft según la spec del formato ICONDIR + ICONDIRENTRY (learn.microsoft.com/en-us/previous-versions/ms997538). Cada resolución incrustada se almacena como un bloque de datos de imagen codificado en PNG en 32bpp ARGB — el formato introducido con Windows Vista (RTM 8 de noviembre de 2006; disponibilidad general al consumidor 30 de enero de 2007) que preserva el alfa con limpieza y mantiene el tamaño de archivo pequeño. La conversión corre localmente: cada tamaño objetivo se genera vía downscale Lanczos3 de alta calidad desde el PNG origen, se codifica como blob PNG, después se empaqueta en el contenedor ICO escribiendo la cabecera ICONDIR de 6 bytes + el array de ICONDIRENTRY de 16 bytes + los bloques de datos PNG concatenados (según el encoder en src/lib/ico-encoder.ts). La salida es un archivo .ico real listo para dejar en `/favicon.ico` — los navegadores desde Internet Explorer 5 (Bharat Shyam en Microsoft introdujo la convención favicon que llegó con IE 5, lanzado el 18 de marzo de 1999) hasta cada navegador moderno solicitan automáticamente /favicon.ico como respaldo cuando ninguna declaración `<link rel='icon'>` coincide. Los archivos nunca salen del dispositivo.
Cómo producir un favicon.ico multi-resolución
- Arrastra un PNG cuadrado a la herramienta (512x512 con fondo transparente es ideal). El decodificador PNG integrado del navegador lee el origen y la herramienta centra-recorta el cuadrado mayor automáticamente si las dimensiones son no-cuadradas.
- La herramienta genera los seis tamaños objetivo desde el origen: 16, 32, 48, 64, 128, 256 píxeles. Cada tamaño se produce vía downscale Lanczos3 de alta calidad (más nítido que el smoothing por defecto de Canvas para contenido icon-grade).
- Elige un tamaño de vista previa desde la cuadrícula de tamaños — esto solo afecta a la vista previa en pantalla; los seis tamaños siempre se empaquetan en el ICO de salida independientemente del tamaño de vista previa que elijas.
- La herramienta codifica cada bitmap reescalado como PNG-en-ICO 32bpp ARGB y empaqueta los seis blobs PNG en un único contenedor ICO escribiendo la cabecera ICONDIR de 6 bytes + seis estructuras ICONDIRENTRY de 16 bytes + bloques de datos PNG concatenados según la spec de Microsoft.
- Descarga el archivo resultante `<nombre-original>.ico` y déjalo en la raíz de tu sitio como `/favicon.ico`. Opcionalmente declara también el stack moderno: `<link rel='icon' href='/icon.svg' type='image/svg+xml'>` para escalado nítido + `<link rel='icon' href='/favicon.ico' sizes='any'>` como respaldo heredado.
Casos de uso comunes
- Construir un /favicon.ico real para el lanzamiento de una web — compatible directo con cada navegador desde IE 5 (1999) y aún solicitado automáticamente por navegadores modernos como respaldo favicon heredado.
- Producir un icono de acceso directo Windows multi-resolución desde un PNG logo — el Explorador de Windows elige el tamaño incrustado correcto desde el contenedor ICO automáticamente (16 para iconos pequeños, 48 para iconos grandes, 256 para jumbo).
- Generar el respaldo ICO heredado para emparejar con un stack favicon SVG declarado moderno (`<link rel='icon' href='/icon.svg' type='image/svg+xml'>` + `/favicon.ico` de respaldo para contextos heredados + Explorador de Windows).
- Regenerar el favicon.ico de una marca tras un refresh de logo para sustituir frames 16x16 pixelados por bitmaps Lanczos3 nítidos en cada tamaño estándar.
- Producir un ICO de un solo archivo de uso directo para entornos que no soportan declaraciones `<link rel='icon'>` (algunas plantillas CMS, frameworks de sitio estático con control limitado del head).
Preguntas frecuentes
¿La salida realmente empaqueta los seis tamaños o solo el tamaño seleccionado en vista previa?
Los seis tamaños (16, 32, 48, 64, 128, 256) siempre se empaquetan en el ICO de salida independientemente del botón de tamaño de vista previa que elijas. La cuadrícula de tamaño de vista previa solo afecta a la vista previa en píxeles en pantalla para ayudarte a visualizar cómo aparecerá el favicon en distintos tamaños de superficie; el archivo .ico descargado siempre es un contenedor multi-resolución con las seis resoluciones incrustadas según la spec ICONDIR + ICONDIRENTRY. Puedes verificarlo abriendo el .ico en una herramienta como IcoFX, Greenfish Icon Editor, o ejecutando `identify -format '%w %h %z\n' favicon.ico` vía ImageMagick — los seis tamaños incrustados aparecerán listados.
¿Necesito favicon.ico si declaro favicons PNG vía <link>?
Los navegadores modernos (Chrome 4+, Firefox 3+, Safari 4+, Edge 12+) prefieren los favicons PNG declarados vía `<link rel='icon' sizes='WxH' type='image/png'>` sobre /favicon.ico cuando ambos están presentes. Sin embargo, los navegadores siguen pidiendo automáticamente /favicon.ico como respaldo cuando ninguna declaración `<link rel='icon'>` coincide con el contexto solicitado, así que servir un /favicon.ico (construido por esta herramienta) maximiza la cobertura. Internet Explorer 8 y anteriores solo soportan el respaldo /favicon.ico y la declaración heredada `<link rel='shortcut icon' href='...ico'>`; los favicons PNG declarados vía WHATWG HTML son solo post-IE-8. El Explorador de Windows + iconos de acceso directo de escritorio también eligen desde /favicon.ico cuando está presente.
¿Por qué downscale Lanczos3 en lugar del valor predeterminado de Canvas?
El imageSmoothingQuality por defecto de Canvas (predeterminado del navegador; ajustable a 'low' / 'medium' / 'high') usa un filtro bilineal o bicúbico — adecuado para downscaling de imagen general pero produce bordes más suaves a tamaños icon-grade (16x16, 32x32) donde cada píxel importa. Lanczos3 (reformulación de Duchon 1979 del filtro sinc con ventana) preserva la nitidez a tamaños pequeños usando un kernel más amplio de 6 taps que aproxima mejor la respuesta sinc ideal. El helper del codebase src/lib/lanczos.ts es lo que ImageGridSplitter y esta herramienta usan para downscales icon-precisos. La contrapartida es aproximadamente 2-3× el coste CPU del bilineal, lo cual es irrelevante para 6 tamaños pequeños de icono (sub-50ms total).
¿Qué tamaños contiene el ICO de salida y por qué estos tamaños específicos?
La salida empaqueta tamaños de 16, 32, 48, 64, 128 y 256 píxeles — el set ICO_SIZES estándar según el encoder del codebase. 16x16 fue el tamaño favicon original de IE 5 (1999) y aún se usa en iconos de tipo de archivo del Explorador de Windows y algunas barras de marcadores. 32x32 cubre el caso de uso típico de favicon de pestaña en navegadores modernos en pantallas de DPI estándar. 48x48 es el tamaño icono-grande original del Explorador de Windows. 64/128/256 cubren iconos de acceso directo de escritorio y huecos taskbar de DPI alto; 256x256 es el tamaño máximo que el formato ICO soporta (codificado como 0/0 en los campos width/height del ICONDIRENTRY según la peculiaridad de la spec de Microsoft). La convención touch icon de Apple es 180x180 — eso NO está en la cuadrícula ICO_SIZES estándar; para touch icons declara un PNG separado vía `<link rel='apple-touch-icon' href='/apple-touch-icon.png' sizes='180x180'>`.
¿Se sube mi archivo?
No. La decodificación + downscale Lanczos3 por tamaño + codificación PNG + empaquetado del contenedor ICO corren todos del lado cliente vía WHATWG Canvas drawImage + los helpers Lanczos y ICO-encoder del codebase. La pestaña Network de DevTools muestra cero peticiones de subida durante la conversión.
Lo que esta herramienta produce realmente — favicon.ico multi-resolución real vía el encoder ICONDIR del codebase
Esta herramienta produce un contenedor ICO multi-resolución de Microsoft real, NO solo un PNG tamaño favicon. La pipeline de implementación: (1) carga el PNG origen vía HTMLImageElement del WHATWG y centra-recorta el cuadrado mayor; (2) para cada uno de los seis tamaños objetivo (16, 32, 48, 64, 128, 256), hace downscale Lanczos3 del origen a esa cuadrícula exacta de píxeles vía el helper lanczosResizeCanvas del codebase (src/lib/lanczos.ts) — Lanczos3 es la reformulación de Duchon 1979 del filtro sinc con ventana y produce downscales más nítidos que el smoothing por defecto de Canvas drawImage para contenido icon-grade píxel-preciso; (3) codifica cada bitmap reescalado como blob PNG vía Canvas toBlob('image/png'); (4) empaqueta los seis blobs PNG en un único archivo ICO escribiendo la cabecera ICONDIR de 6 bytes (idReserved=0, idType=1, idCount=6) + un array de seis estructuras ICONDIRENTRY de 16 bytes (cada una con bWidth, bHeight, bColorCount, wPlanes=1, wBitCount=32, dwBytesInRes, dwImageOffset) + los bloques de datos PNG concatenados (src/lib/ico-encoder.ts). El formato de almacenamiento PNG-en-ICO se introdujo con Windows Vista (RTM 8 de noviembre de 2006; disponibilidad general al consumidor 30 de enero de 2007) y está soportado por cada navegador que decodifica favicons ICO (Chrome, Firefox, Safari, Edge — todos desde sus versiones tempranas). Por qué el multi-resolución sigue importando en 2026 incluso con el mecanismo PNG-declarado del WHATWG HTML `<link rel='icon' sizes='WxH'>`: el respaldo /favicon.ico sigue siendo solicitado automáticamente por cada navegador cuando ninguna declaración `<link>` coincide con el contexto, y el Explorador de Windows / iconos de acceso directo de escritorio / herramientas Windows heredadas siguen eligiendo el tamaño incrustado correcto desde un ICO multi-resolución. Los favicons SVG (declarados vía `<link rel='icon' href='/icon.svg' type='image/svg+xml'>` con `sizes='any'`) funcionan en Chrome 80+ (lanzado 4 de febrero de 2020), Firefox 41+ (lanzado 22 de septiembre de 2015) y macOS Safari 15.6+ (lanzado 20 de julio de 2022) — el stack favicon best-practice moderno empareja un SVG declarado vía `<link>` para escalado nítido con un favicon.ico multi-resolución de respaldo (que esta herramienta produce) para contextos heredados.
- La salida es un contenedor ICO multi-resolución real — un único archivo .ico que empaqueta los seis tamaños (16, 32, 48, 64, 128, 256)
- Almacenamiento PNG-en-ICO en 32bpp ARGB según el formato Vista de Microsoft (RTM 8 de noviembre de 2006; disponibilidad general 30 de enero de 2007) — preserva el alfa con limpieza, mantiene el tamaño pequeño
- Encoder ICONDIR + ICONDIRENTRY real según la spec de Microsoft (learn.microsoft.com/en-us/previous-versions/ms997538) vía el helper del codebase src/lib/ico-encoder.ts
- Downscale Lanczos3 por tamaño para una salida más nítida nivel icon-grade que el smoothing por defecto de Canvas drawImage (src/lib/lanczos.ts)
- Nombre de archivo de salida: `<nombre-original>.ico` — listo para dejar como `/favicon.ico` en la raíz del sitio
- Solicitado automáticamente por cada navegador como respaldo favicon heredado (desde Bharat Shyam en Microsoft introdujo la convención favicon que llegó con Internet Explorer 5, lanzado el 18 de marzo de 1999); también elegido por el Explorador de Windows + iconos de acceso directo de escritorio
- En el navegador vía WHATWG Canvas drawImage + Lanczos3 + encoder ICO propio — sin subida
- Opera en sRGB (IEC 61966-2-1:1999); los PNG origen sin perfil ICC embebido se interpretan como sRGB
Gratis. Sin registro. Sin subidas. Anuncios mediante AdSense (con consentimiento).
Fuentes (6)
- W3C (PNG Working Group) (2003). Portable Network Graphics (PNG) Specification (Second Edition). W3C Recommendation 10 November 2003 / ISO/IEC 15948:2004 — source format; PNG with 24-bit RGB + 8-bit alpha is the modern favicon master per WHATWG <link rel='icon'> spec.
- WHATWG (live). HTML Living Standard — link rel='icon' + sizes attribute. html.spec.whatwg.org/multipage/links.html#rel-icon + html.spec.whatwg.org/multipage/semantics.html#attr-link-sizes — modern favicon mechanism: <link rel='icon' href='/favicon-32x32.png' sizes='32x32' type='image/png'> declares a single-resolution PNG favicon; the sizes attribute uses 'WxH' format or 'any' for SVG. Browsers since Chrome 4+ / Firefox 3+ / Safari 4+ / Edge 12+ accept PNG favicons via this mechanism, ranking them ahead of /favicon.ico when both are present.
- WHATWG (live). HTML Living Standard — Canvas 2D Context: drawImage() with destination dimensions + toBlob('image/png'). html.spec.whatwg.org/#dom-context-2d-drawimage + canvas section 4.12.5 — browser-side downscaling: drawImage(source, dx, dy, dWidth, dHeight) draws the source bitmap into the destination size with the canvas's imageSmoothingEnabled + imageSmoothingQuality controlling filter selection; toBlob('image/png') re-encodes losslessly.
- Shyam, B. (Microsoft Corporation) (1999). favicon.ico convention introduced in Internet Explorer 5. thehistoryoftheweb.com/how-we-got-the-favicon — favicon convention origin: Bharat Shyam at Microsoft introduced /favicon.ico at site root, shipped with Internet Explorer 5 (released 18 March 1999), auto-fetched by browsers since. Modern browsers still request /favicon.ico as a fallback even when no <link rel='icon'> is declared, but rank declared <link> resources higher when present.
- Microsoft Corporation (1985). ICO Icon File Format — ICONDIR + ICONDIRENTRY container structure. learn.microsoft.com/en-us/previous-versions/ms997538(v=msdn.10) — true ICO container format requires the ICONDIR header + ICONDIRENTRY array + image-data block (BMP or PNG-encoded). This tool produces a single-size PNG file (suitable for <link rel='icon' sizes='NxN'> declaration), NOT a multi-resolution ICO container; building a true multi-resolution ICO file requires a custom JS encoder that writes the ICONDIR header + ICONDIRENTRY entries + concatenates the image data blocks.
- 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; PNG source files without an embedded ICC profile are interpreted as sRGB by the browser decoder.
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. ·