Comparación de formatos de favicon: ICO vs PNG vs SVG
Tres formatos, tres funciones. Usa .ico para la ruta /favicon.ico y los clientes antiguos, PNG para los navegadores modernos y todos los tamaños de icono de app, y SVG para un icono de pestaña nítido y adaptable al tema.
Cada formato cumple una función distinta
No existe un único formato de favicon ideal. Cada uno cubre un caso que los demás no pueden. Elegir uno solo y forzarlo en todas partes es el camino a las pestañas en blanco y a las pantallas de inicio con un cuadrado gris.
El formato .ico es un contenedor que guarda varios tamaños en un solo archivo. Eso importa porque los navegadores y los rastreadores siguen pidiendo /favicon.ico por defecto, y los clientes antiguos solo entienden .ico. Un .ico de verdad no es un PNG con la extensión renombrada. Renombrar un archivo cambia su nombre, no sus bytes, y la mayoría de los clientes lo rechazará.
El PNG es el caballo de batalla. Todo navegador moderno lo lee, y todo hueco de icono de app y de manifest (16, 32, 180, 192, 512) es un PNG. El SVG es el recién llegado: un único archivo vectorial que se mantiene nítido a cualquier tamaño y puede cambiar de color en el modo oscuro con una media query dentro del propio archivo.
ICO vs PNG vs SVG
| Formato | Mejor para | Cuidado con |
|---|---|---|
| .ico | La ruta /favicon.ico y los navegadores o rastreadores antiguos que solo leen .ico | Debe ser un contenedor real con varios tamaños (16 + 32 + 48), no un PNG renombrado. No lo uses para iconos de app. |
| PNG | Las pestañas de los navegadores modernos y todos los tamaños de icono de app y de manifest (16, 32, 180, 192, 512) | Es raster, así que cada tamaño es un archivo aparte. Sigues necesitando todos los tamaños, un solo PNG no los cubre todos. |
| SVG | Un único icono de pestaña nítido que escala a cualquier tamaño y puede invertir el color en el modo oscuro | No es válido en /favicon.ico y no se usa en las pantallas de inicio de iOS ni de Android. Mantenlo simple, los efectos pueden renderizarse de forma distinta según el navegador. |
Cómo conviven en el head
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">Un navegador que lee SVG usa el favicon.svg. Todo lo demás recurre a los PNG y al .ico. El apple-touch-icon se queda en PNG porque iOS ignora el SVG aquí.
Preguntas frecuentes
¿Puedo simplemente renombrar un PNG a favicon.ico?
No. El .ico es un formato contenedor propio, no un PNG con otra extensión. Algunos navegadores toleran un archivo mal etiquetado, pero muchos no, y los rastreadores son más estrictos. Genera un .ico real con varios tamaños.
¿Sigo necesitando el favicon.ico si tengo PNG y SVG?
Sí, conserva uno. Los navegadores, los lectores de feeds y los rastreadores de búsqueda siguen pidiendo /favicon.ico sin ninguna etiqueta. Un archivo en esa ruta es la red de seguridad cuando tus etiquetas link pasan desapercibidas.
¿Un favicon en SVG es mejor que en PNG?
Para el icono de pestaña puede serlo, porque un único archivo se mantiene nítido en todos los tamaños y puede adaptarse al modo oscuro. No sustituye a los iconos de app en PNG de las pantallas de inicio, así que usa ambos.
¿Qué formato uso para el icono de manifest de 512x512?
PNG. El array icons del manifest espera PNG raster en 192 y 512, incluido uno maskable. El SVG no es el formato que Android usa para los iconos de apps instaladas.