Favicon para Vue.js
Las aplicaciones Vue envían activos estáticos desde /public (Vite) o /public (Vue CLI). Coloque favicon.ico allí y haga referencia a él en index.html: el servidor de desarrollo y la compilación de producción lo sirven en la raíz del sitio.
Vite: ponga favicon.ico en /public/favicon.ico. Agregue <link rel="icon" href="/favicon.ico"> en index.html dentro de <head>.
Para compilaciones con hash, el nivel raíz /favicon.ico no obtiene un hash de contenido, ideal para solicitudes de navegador estables.
Vue CLI utiliza la misma convención pública/. Reemplace el public/favicon.ico predeterminado con su archivo de varios tamaños.
Agregue PNG y enlaces de íconos táctiles de Apple para dispositivos móviles. Mantenga las rutas absolutas (/apple-touch-icon.png) para que el modo de historial del vue-router no rompa las rutas anidadas.
Al implementar en Netlify o Vercel, asegúrese de que los archivos favicon estén incluidos en la salida dist: se copian de forma pública/automáticamente.
Para vite-plugin-pwa, declare íconos en la sección de manifiesto de vite.config.ts: entradas PNG de 192 × 192 y 512 × 512.
Cómo funciona
- 1
Copiar iconos al público/
favicon.ico, apple-touch-icon.png, opcional favicon.svg.
- 2
Editar index.html
Agregue etiquetas <link rel="icon"> y apple-touch-icon.
- 3
Construir e implementar
Confirme que /favicon.ico devuelve 200 en producción.
Pruébalo ahora
Generar activos de favicon Vue
Generador de FaviconPreguntas frecuentes
¿Por qué el servidor de desarrollo Vue muestra el logotipo de Vite?+
Reemplace public/favicon.ico y reinicie el servidor de desarrollo.
¿Dónde van los favicons SVG en Vue?+
public/favicon.svg más <link rel="icon" type="image/svg+xml" href="/favicon.svg"> en index.html.
¿Vue-router afecta las rutas de favicon?+
Solo si usa hrefs relativos, use siempre rutas / relativas a la raíz.