ICO vs PNG para favicons
ICO es universal pero heredado; PNG es moderno pero necesita enlaces explícitos. Esta comparación cubre el comportamiento del navegador, el tamaño del archivo, la transparencia, ejemplos resueltos y cómo publicar ambos formatos sin dolores de cabeza por duplicación.
Por qué esta comparación sigue siendo importante
Los equipos nuevos en el front-end a menudo eligen PNG porque se siente moderno, o ICO porque así lo indica algún tutorial de 2012. La respuesta correcta en 2026 es casi siempre ambas, utilizadas para diferentes trabajos. Utilice nuestro [generador favicon](herramienta:generador favicon), [convertidor PNG a ICO](herramienta:png-to-ico), [convertidor SVG a ICO](herramienta:svg-to-ico) y [probador favicon en vivo](utilidad:favicon-tester) para crear y verificar su conjunto de iconos, y lea la guía complementaria para obtener una tutorial condensado.
ICO es un formato contenedor: un archivo, muchos mapas de bits incrustados. PNG es una única imagen rasterizada por archivo. Los navegadores los tratan de manera diferente al decidir qué buscar para una pestaña en comparación con un banner de instalación PWA.
Elegir mal le cuesta pestañas borrosas, descargas infladas o iconos faltantes en los accesos directos Windows. Esta guía explica dónde gana cada formato y cómo combinarlos.
Use our favicon generator, PNG to ICO converter, SVG to ICO converter, and live favicon tester to build and verify your icon set, and read the companion guide for a condensed walkthrough.
ICO: el retroceso universal
Cada navegador de escritorio solicitará /favicon.ico incluso si nunca agrega una etiqueta <link>. Esa recuperación implícita es la razón por la que la raíz .ico sigue siendo obligatoria.
Dentro del contenedor, cada entrada almacena datos de ancho, alto y píxeles (a menudo comprimidos con PNG para tamaños de 64 × 64 y superiores). El cliente elige la que más se acerque a la densidad de visualización.
Windows Explorer, las vistas previas de enlaces de Outlook y los lectores RSS heredados aún dependen de .ico. Omitirlo rompe los íconos para los usuarios que nunca visitan su HTML <head>.
PNG: píxeles perfectos en cualquier densidad
PNG le ofrece una resolución conocida por archivo. Vincúlelo explícitamente: <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">.
Las pantallas de alto DPI se benefician porque puede publicar un PNG de 32 × 32 que los navegadores procesan en una ranura CSS de 16 × 16 con una densidad de 2 ×, más nítida que una versión exclusiva de 16 × 16.
Los PWA requieren iconos de manifiesto PNG en 192×192 y 512×512. Los iconos táctiles Apple utilizan 180×180 PNG. Estos tamaños no pertenecen al flujo de trabajo clásico .ico de varios tamaños.
Comparación lado a lado
Compatibilidad con navegador: ICO gana en recuperaciones implícitas de /favicon.ico. PNG gana cuando declaras tamaños para las pestañas Retina y los lanzadores Android.
Tamaño del archivo: un .ico bien construido con 128 y 256 entradas comprimidas PNG suele ser más pequeño que seis archivos PNG separados. Los PNG sueltos ganan cuando solo necesitas una o dos tallas.
Transparencia: ambos admiten alfa cuando se codifican correctamente. Las herramientas .ico incorrectas aplanan la transparencia a blanco; utilice un generador que conserve PNG alfa dentro del contenedor.
Autoría: PNG es más fácil de obtener una vista previa en cualquier visor de imágenes. ICO requiere una herramienta de exportación de varios tamaños, razón por la cual existen los generadores.
Ejemplos prácticos
Blog mínimo: solo favicon.ico en la raíz. Se requieren cero etiquetas <link>; aceptable para sitios personales.
Sitio de marketing SaaS: favicon.ico más favicon.svg más 180×180 apple-touch-icon.png. Declarado en <head>; Cubre escritorio, iOS e incrustaciones sociales.
PWA instalable: agregue android-chrome-192x192.png y android-chrome-512x512.png a site.webmanifest mientras mantiene favicon.ico para clientes de pestañas heredados.
Envoltorio de aplicaciones de escritorio Windows: publica un .ico con capacidad de 256 × 256 para Electron o Tauri; PNG opcional para la interfaz de usuario dentro de la aplicación en tamaños fijos.
Veredicto: use ambos juntos
Envíe un favicon.ico de varios tamaños para soporte universal y recuperaciones implícitas. Agregue variantes PNG para el ícono táctil de Apple, íconos de manifiesto y etiquetas <link> opcionales por tamaño.
Coloque una capa SVG en la parte superior cuando su marca sea compatible con vectores y desee pestañas compatibles con el modo oscuro. ICO sigue siendo el piso; SVG y PNG son optimizaciones.
No convierta PNG a ICO cambiando el nombre de la extensión. Los archivos .ico reales necesitan una estructura de directorio adecuada y marcos por tamaño.
Preguntas frecuentes
¿ICO está en desuso? No. Los navegadores todavía lo recuperan de forma predeterminada. Es un legado en diseño, no en uso.
¿Puede un PNG reemplazar a favicon.ico? No de forma segura. Se perderán solicitudes /favicon.ico implícitas y muchas superficies Windows.
¿Qué tamaños PNG son más importantes? 32×32 para pestañas, 180×180 para iOS, 192 y 512 para PWAs.
¿ICO admite animación? Los favicon animados clásicos están obsoletos. En su lugar, publique un .ico estático de varios tamaños.
Solución de problemas
Chrome muestra PNG pero Edge muestra un icono borroso: es posible que Edge todavía esté leyendo un caché .ico antiguo. Regenera el .ico con un marco nítido de 32×32.
El archivo ICO tiene más de 300 KB: probablemente entradas BMP sin comprimir a 256 × 256. Reexportar con compresión PNG dentro del contenedor.
PNG se ve nítido, ICO no: es posible que haya creado el .ico a partir de una fuente más pequeña que el PNG. Utilice el mismo maestro de 512 × 512 para ambos.
Transparencia perdida solo en ICO: su herramienta codificó BMP de 32 bits en lugar de entradas comprimidas con PNG. Cambie de generador o reexporte con alfa conservado.
guía de decisión rápida
Si necesita soporte /favicon.ico implícito o atajos Windows: publique ICO.
Si necesita nitidez de la pestaña Retina con control explícito: agregue etiquetas PNG <link> en 32×32 o tamaños de paquete en ICO.
Si necesita la interfaz de usuario de instalación de PWA: PNG en el manifiesto en 192 y 512: ICO no reemplaza los íconos del manifiesto.
Si necesita escala infinita y modo oscuro CSS en pestañas: agregue SVG, pero mantenga ICO debajo.
Cuando el ancho de banda es importante en un sitio estático con un solo ícono: un ICO de varios tamaños y bien comprimido por sí solo suele ser más pequeño que ICO más tres PNG sueltos.
Cuando el diseño se repite semanalmente: mantenga SVG en Git como fuente, regenere las exportaciones ICO y PNG en cada etiqueta de versión mediante un script.
Migración de PNG únicamente a ICO+PNG
Audite las etiquetas actuales con Ver código fuente o DevTools. Tenga en cuenta todos los rel="icon" y apple-touch-icon href ya implementados.
Genere un favicon.ico de varios tamaños a partir del mismo PNG maestro que utilizó para los archivos sueltos. Reemplace la raíz /favicon.ico sin cambiar el nombre de los activos no relacionados.
Conserve las etiquetas PNG <link> existentes si funcionan. Agregue ICO primero en la lista para que los analizadores más antiguos lo vean temprano.
Implemente durante el tráfico bajo, purgue la caché CDN para /favicon.ico específicamente y verifique con curl -I que el tipo de contenido sea image/x-icon o image/vnd.microsoft.icon.
Busque en Google Search Console errores de rastreo en las URL de los iconos después de la migración. Los íconos de raíz rota a veces aparecen como 404 suaves en los registros.