Si alguna vez has desplegado una aplicación Vue solo para darte cuenta de que la pestaña del navegador todavía muestra el logotipo verde 'V' por defecto, te has saltado un paso de branding pequeño pero vital. Es el equivalente digital a llevar un traje a medida con calcetines desparejados. En 2026, los usuarios esperan una experiencia pulida desde el momento en que la pestaña comienza a cargarse, y un icono genérico grita 'proyecto inacabado'.

La mayoría de los desarrolladores tienen problemas con el vue favicon setup porque intentan tratar el icono como un componente estándar de Vue o un recurso empaquetado. Eso es un error. Los favicons viven fuera del ciclo de vida estándar de los componentes y requieren una estrategia específica para funcionar en Safari, Chrome y pantallas de inicio móviles. Vamos a solucionar eso hoy usando el flujo de trabajo moderno basado en Vite.

La estrategia 'Public': Por qué es la ganadora

En un proyecto moderno de Vue 3 impulsado por Vite, tienes dos lugares principales para almacenar imágenes: la carpeta src/assets y la carpeta public. Para tu favicon, el directorio public es la única opción correcta. ¿Por qué? Porque Vite no procesa los archivos en la carpeta public; simplemente los copia a la raíz de tu carpeta dist durante el proceso de construcción.

Cuando el navegador busca /favicon.ico, espera encontrarlo en la raíz. Si pones tu icono en src/assets, Vite aplicará un hash al nombre del archivo (ej. favicon.a1b2c3.ico), y el navegador no lo encontrará a menos que lo importes manualmente en cada página. Quédate con la carpeta public para mantener tu vida simple y tus rutas predecibles.

Paso 1: Preparando tus recursos

No te conformes solo con un archivo .ico. En 2026, el estándar de oro es una combinación de SVG para navegadores modernos y un fallback ICO para los antiguos. El SVG permite un escalado nítido e incluso soporte para modo oscuro. Puedes usar favicons SVG para asegurar que tu logo se vea perfecto en pantallas 5K sin aumentar el tamaño de tu bundle.

Deberías tener tres archivos listos en tu carpeta public:

Paso 2: Actualizando el punto de entrada

Como Vue es una Single Page Application (SPA), solo necesitas editar un archivo: index.html. Este archivo se encuentra en la raíz de tu proyecto. Ábrelo y busca la sección <head>. Querrás reemplazar el código por defecto con esta secuencia específica:

<link rel='icon' href='/favicon.ico' sizes='32x32'>
<link rel='icon' href='/favicon.svg' type='image/svg+xml'>
<link rel='apple-touch-icon' href='/apple-touch-icon.png'>

Este orden importa. Los navegadores modernos verán el SVG y lo preferirán por el atributo type='image/svg+xml', mientras que los navegadores antiguos lo ignorarán y tomarán el archivo ICO. Si tu icono no se actualiza, es probable que necesites realizar una limpieza de caché del favicon para forzar al navegador a reconocer los nuevos archivos.

Paso 3: Favicons dinámicos para notificaciones

Una de las cosas más geniales de Vue es la reactividad. Puedes cambiar tu favicon basándote en el estado de tu app. Piensa en cómo GitHub añade un pequeño punto azul a su favicon cuando tienes notificaciones sin leer. Puedes lograr esto en Vue creando una función de utilidad simple.

export function setDynamicFavicon(iconPath) {
  const link = document.querySelector("link[rel*='icon']");
  if (link) {
    link.href = iconPath;
  }
}

Puedes llamar a esta función dentro de un watch en tu App.vue. Por ejemplo, si un usuario tiene mensajes sin leer, cambias /favicon.svg por /favicon-notification.svg. Es un detalle minúsculo que hace que tu web app se sienta como una aplicación de escritorio nativa.

Errores comunes a evitar

El error más frecuente que veo es usar rutas relativas como ./favicon.ico. En una configuración de Vue Router con rutas anidadas (como /user/settings/profile), una ruta relativa fallará porque el navegador buscará el icono en /user/settings/favicon.ico. Usa siempre rutas absolutas que comiencen con una barra diagonal (/favicon.ico).

Otra trampa es ignorar el archivo manifest. Si quieres que tu aplicación Vue parezca profesional cuando se 'Añade a la pantalla de inicio' en Android, necesitas un manifest.json en tu carpeta public que apunte a tus iconos. Sin él, Android mostrará una captura de pantalla genérica de tu sitio, lo cual se ve poco profesional.

Al final del día, tu favicon es el embajador más pequeño de tu marca. Configurarlo correctamente en Vue toma menos de cinco minutos pero rinde frutos cada vez que un usuario mira sus pestañas abarrotadas. Mantenlo simple, usa la carpeta public y siempre proporciona una versión SVG para los mejores resultados en 2026.