¿Tu favicon debería ser SVG, PNG o ICO? Respuesta corta: usa los tres para una configuración a prueba de futuro. Pero cada formato tiene un papel claro. Así se comparan.
Comparación rápida
| Formato | Escalable | Soporte de navegadores | Modo oscuro | Ideal para |
|---|---|---|---|---|
| ICO | No (tamaños fijos agrupados) | Universal (incl. heredados) | No | El respaldo imprescindible |
| PNG | No | Todos los navegadores modernos | Manual (archivos separados) | Tamaños específicos (16, 32, 180, 192, 512) |
| SVG | Sí (infinito) | Baseline — todos los navegadores modernos (Safari 26 cerró la brecha, sept. 2025) | Sí (mediante media queries CSS; Safari tiene un bug conocido) | Navegadores modernos, modo oscuro, nitidez |
ICO — el respaldo universal
.ico es el formato de favicon más antiguo y el único garantizado de funcionar en todas partes, incluido Internet Explorer y los navegadores empresariales antiguos. Un solo .ico puede agrupar varios tamaños (normalmente 16, 32, 48), y el navegador elige el mejor.
Desventaja: no es escalable, no admite trucos de transparencia y tiene mayor tamaño de archivo que el SVG. Pero todo sitio debería publicar uno de todos modos.
PNG — el caballo de batalla
PNG es lo que la mayoría de los navegadores modernos cargan realmente para el icono de la pestaña. Declaras varios tamaños y el navegador elige el adecuado para la pantalla:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />Desventaja: cada tamaño es un archivo separado, y los PNG no pueden adaptarse al modo oscuro.
SVG — ya no es el futuro, es el presente
Los favicons SVG son vectores: se mantienen perfectamente nítidos a cualquier tamaño, pesan menos y — lo mejor de todo — admiten el modo oscuro mediante CSS incrustado:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
@media (prefers-color-scheme: dark) {
.logo { fill: #ffffff; }
}
.logo { fill: #000000; }
</style>
<rect class="logo" width="32" height="32" rx="6"/>
</svg><link rel="icon" type="image/svg+xml" href="/favicon.svg" />Actualización (septiembre de 2025): Safari 26 por fin añadió soporte para favicons SVG, lo que convierte al SVG en una característica Baseline en todos los navegadores modernos — Chrome, Edge, Firefox y Safari. El viejo consejo de que “Safari no admite favicons SVG” ya está desactualizado.
Las advertencias restantes: Safari actualmente ignora las media queries de modo oscuro dentro de los favicons SVG (bug de WebKit #309949), y los WebView antiguos de Android y los navegadores corporativos restringidos siguen necesitando un respaldo raster — así que mantén los links PNG/ICO junto a tu SVG.
Genera un favicon.svg saneado →
¿Entonces cuál deberías usar?
El stack de favicon recomendado (decláralos en este orden):
- Un SVG primero — los navegadores modernos (todos, desde Safari 26) lo toman, y habilita el modo oscuro. Consulta el generador de favicon SVG.
- PNGs de 32, 180 (Apple), 192, 512 para cada plataforma.
- Un
.icocomo respaldo universal heredado. - Un
site.webmanifestque los enlace todos para las PWA.
Consigue todos estos desde una sola subida en Favicon.one — el generador produce el paquete multiformato completo con HTML listo para pegar.