¿El favicon de Vue no se muestra? Aquí está la solución
Un componente monoarchivo de Vue no puede renderizar una etiqueta link en el head, así que el favicon se declara en index.html: en la raíz del proyecto con Vite, dentro de public/ con Vue CLI. Una pestaña en blanco significa que la etiqueta de ese archivo es incorrecta.
Por qué no es un componente
El navegador pide el favicon mientras analiza el head, antes de que Vue monte nada. Todo lo que añadas desde dentro de la aplicación llega demasiado tarde, y por eso el icono pertenece al HTML estático.
Dónde vive ese HTML depende del andamiaje. create-vue (Vite) mantiene index.html en la raíz del proyecto y copia public/ a la salida sin tocarlo. Vue CLI mantiene la plantilla en public/index.html y la pasa por EJS, así que las URL necesitan un marcador.
Encuentra el fallo
- 1
Abre /favicon.ico directamente
Un 404 significa que el archivo no se sirve en esa ruta. Si carga, el archivo está bien y el problema es la etiqueta link o una caché.
- 2
Confirma en qué andamiaje estás
Un index.html en la raíz significa Vite: usa /favicon.ico. Una plantilla public/index.html significa Vue CLI: usa el prefijo <%= BASE_URL %>.
- 3
No importes el icono desde src
Una imagen importada se empaqueta y recibe un hash, así que /favicon.ico deja de resolverse. Mantén los iconos en public/ con sus nombres intactos.
El favicon de Vue no se muestra: preguntas frecuentes
¿Por qué no se muestra mi favicon de Vue?
La etiqueta link en index.html apunta a donde el archivo no está, o (en Vue CLI) falta el marcador BASE_URL y la ruta se rompe fuera de la raíz del dominio. Abre /favicon.ico directamente para ver si el archivo se sirve siquiera.
¿Puedo definir el favicon desde un componente de Vue?
Puedes intercambiarlo en tiempo de ejecución con useHead, y el navegador sigue el cambio tras la carga. Pero la primera petición usa lo que declaró index.html, así que mantén ahí un valor por defecto real.
¿Por qué desapareció el favicon después de importarlo?
Importar una imagen desde src se la entrega al bundler, que emite un nombre de archivo con hash. Entonces nada es accesible en /favicon.ico. Coloca el archivo en public/ en su lugar.