¿Hace falta favicon.ico en 2025?
Una guía práctica sobre favicon.ico en 2025. Por qué los navegadores modernos ya no lo exigen y, aun así, conviene incluirlo para no ensuciar los logs del servidor y mantener compatibilidad con herramientas antiguas.
La respuesta breve
En sentido estricto, los navegadores modernos (Chrome, Edge, Safari, Firefox) ya no exigen el archivo .ico. En la práctica, no obstante, es muy recomendable conservarlo.
Si no incluyes favicon.ico, los logs del servidor se llenarán de errores 404. Muchos bots antiguos y lectores RSS no leen el encabezado HTML: piden /favicon.ico directamente en el directorio raíz.
La configuración recomendada en 2025
Con 3 o 4 archivos cubres todos los casos. No hace falta generar decenas de tamaños en formatos antiguos:
1. favicon.ico (32×32) – Compatibilidad antigua y respaldo
- Debe colocarse en el directorio raíz del sitio (/favicon.ico)
- Sirve sobre todo para evitar errores en los logs y atender herramientas antiguas
2. icon.svg – Estándar actual (principal)
- Lo prefieren los navegadores modernos
- Se puede escalar sin pérdida de calidad
3. apple-touch-icon.png (180×180) – Dispositivos iOS
- Se usa al "Add to Home Screen" en iPhone/iPad
- No hacen falta varios tamaños: 180×180 cubre todos los dispositivos iOS
4. manifest.webmanifest (opcional)
- Sobre todo para Android e instalaciones PWA
- Define iconos PNG de 192×192 y 512×512
Código de implementación (HTML / Nuxt Head)
El enfoque más breve y actual:
<head>
<!-- 1. Modern SVG (highest priority) -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<!-- 2. Apple iOS icon -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- 3. Traditional .ico (fallback) -->
<!-- Note: Adding sizes="any" tells Chrome this is a bitmap, -->
<!-- so Chrome will prefer SVG over ICO -->
<link rel="icon" href="/favicon.ico" sizes="any">
<!-- 4. Android/PWA configuration -->
<link rel="manifest" href="/manifest.webmanifest">
</head>En proyectos Nuxt.js
En nuxt.config.ts o en el componente de página:
useHead({
link: [
{ rel: 'icon', href: '/icon.svg', type: 'image/svg+xml' },
{ rel: 'apple-touch-icon', href: '/apple-touch-icon.png' },
{ rel: 'icon', href: '/favicon.ico', sizes: 'any' },
{ rel: 'manifest', href: '/manifest.webmanifest' },
],
})¿Por qué conservar favicon.ico?
Logs del servidor limpios
Sin favicon.ico, los logs se llenan de 404. Cada vez que un bot, un crawler o un lector RSS pide /favicon.ico (ocurre solo), queda una entrada de error. Ese ruido dificulta ver los problemas de verdad.
Compatibilidad con herramientas antiguas
Muchas herramientas antiguas, lectores RSS, gestores de marcadores y extensiones del navegador siguen esperando favicon.ico en la raíz. Los navegadores modernos no lo necesitan, pero esas herramientas a menudo no leen el HTML y piden la ruta raíz directamente.
Coste mínimo, beneficio alto
Un favicon.ico de 32×32 es irrelevante en tamaño (suele pesar menos de 2 KB) y no pide mantenimiento. Unos logs limpios y una compatibilidad amplia compensan de sobra ese coste.
El enfoque actual: SVG primero
Conviene conservar favicon.ico por compatibilidad, pero el favicon principal debería ser SVG:
- Independiente de la resolución: Se ve nítido a cualquier tamaño, de 16×16 a 512×512
- Archivo más pequeño: A menudo pesa menos que el PNG equivalente
- A prueba de futuro: Funciona bien en pantallas de alta densidad y en dispositivos que vengan después
- Un solo archivo: Un SVG sustituye varios tamaños PNG
Los navegadores modernos (Chrome, Firefox, Safari, Edge) admiten favicons SVG. El atributo sizes="any" en el enlace ICO hace que, si hay SVG, el navegador lo prefiera.
Ideas clave
- No borres el .ico: Aunque el navegador no lo use, déjalo en el directorio raíz para no ensuciar los logs y mantener compatibilidad con herramientas antiguas.
- El SVG es el futuro: Con un solo SVG resuelves la mayor parte de los problemas de resolución.
- Configuración mínima: Con 3 o 4 archivos (favicon.ico, icon.svg, apple-touch-icon.png y, si quieres, manifest.webmanifest) cubres todos los casos de uso.
- El orden importa: Lista primero el SVG y después el ICO con sizes="any" para que los navegadores modernos elijan el mejor formato.
Conclusión
En 2025, los navegadores modernos no necesitan favicon.ico en sentido estricto, pero conservarlo es una buena práctica. Evita ruido en los logs, mantiene la compatibilidad con herramientas antiguas y casi no cuesta nada. Junto a un favicon SVG actual, es la configuración más sólida para el presente y para lo que venga.
La clave es la simplicidad: un SVG como favicon principal, un ICO pequeño por compatibilidad, un Apple touch icon para iOS y, si hace falta, un manifest para PWA. Con eso cubres todos los escenarios sin tener que gestionar decenas de tamaños distintos.