Favicon ICO vs PNG: ¿qué formato deberías usar?
Usa PNG como favicon principal y mantén un favicon.ico en la raíz del sitio como respaldo. PNG te da color completo de 24 bits y un canal alfa real, comprime mejor y todos los navegadores actuales lo aceptan desde una etiqueta link; la ventaja que le queda a ICO es que empaqueta varios tamaños en un solo archivo y es lo que los clientes solicitan desde /favicon.ico cuando no hay etiqueta presente. Incluir ambos cuesta un archivo extra y elimina el compromiso por completo.
Los dos formatos
ICO es el contenedor de iconos de Windows, y se convirtió en el formato de favicon por accidente: Internet Explorer solicitaba /favicon.ico y todo el mundo incluía uno. Su propiedad definitoria es que un único archivo .ico contiene varios mapas de bits a distintos tamaños, y el consumidor elige uno.
PNG es un formato de imagen web corriente con compresión sin pérdidas y un canal alfa completo. Contiene exactamente una imagen a un tamaño, así que cubrir varios tamaños implica varios archivos y varias etiquetas link, que es lo que los navegadores modernos esperan de todos modos.
Cuál elegir
ICO
Respaldo y solicitudes por ruta directa
- Un solo archivo lleva juntos mapas de bits de 16, 32 y 48 píxeles
- Solicitado desde /favicon.ico por navegadores, rastreadores y lectores de feeds sin que intervenga ninguna etiqueta link
- Comprendido por todos los navegadores jamás lanzados, incluidos los muy antiguos
- Formato nativo de los accesos directos de escritorio de Windows
- Incómodo de crear e inspeccionar; la mayoría de las herramientas lo tratan como un artefacto de compilación
PNG
Start hereTu favicon principal
- Color de 24 bits, así que los degradados y las marcas fotográficas sobreviven
- Canal alfa completo, así que los bordes se suavizan limpiamente sobre cualquier color de pestaña
- Más pequeño que el ICO equivalente con la misma calidad
- Compatible con todos los navegadores actuales mediante link rel="icon"
- El formato que los manifiestos de Android y PWA esperan para los iconos de instalación
Comparación técnica
| Propiedad | ICO | PNG |
|---|---|---|
| Profundidad de color | Paleta de 8 bits en archivos clásicos; 32 bits en los modernos | Color de 24 bits más alfa de 8 bits |
| Transparencia | Máscara de 1 bit en archivos clásicos; canal alfa en las entradas de 32 bits | Canal alfa completo |
| Tamaños por archivo | Varios, normalmente 16, 32 y 48 | Uno |
| Compresión | Mapas de bits sin comprimir, o entradas comprimidas con PNG | DEFLATE sin pérdidas |
| Solicitado sin etiqueta link | Sí, en /favicon.ico | No |
Qué poner en el head
<!-- PNG first: modern browsers pick these -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<!-- ICO fallback; also served from /favicon.ico for bare requests -->
<link rel="icon" href="/favicon.ico" sizes="any">Declarar ambos no es un conflicto. Un navegador lee cada enlace de icono, hace coincidir por tipo y tamaño, y usa el ICO solo si lo prefiere o si los PNG fallan.
Preguntas frecuentes sobre ICO vs PNG
¿Puedo prescindir por completo de favicon.ico?
Puedes, y los navegadores modernos funcionarán bien siempre que tus etiquetas link de PNG estén presentes. Lo que se rompe es todo lo que solicita /favicon.ico por ruta sin analizar tu HTML (rastreadores, lectores de feeds, bots de vista previa de enlaces, algunas analíticas), que registrará un 404 y no mostrará nada.
¿Cuál gana si declaro ambos?
Lo decide el navegador, usando los atributos type y sizes de cada enlace. En la práctica los navegadores actuales toman el PNG que mejor coincide con el tamaño que necesitan, y recurren al ICO si nada más coincide.
¿Es ICO de peor calidad que PNG?
No de forma inherente. Una entrada ICO de 32 bits lleva el mismo color y alfa que un PNG, y muchos archivos ICO incrustan literalmente datos PNG. Las quejas de calidad vienen de los viejos ICO de paleta de 8 bits con transparencia de 1 bit, que producen bordes duros y dentados.