Favicon para Nuxt
Nuxt 3 sirve archivos estáticos desde /public en la raíz del sitio. Configure etiquetas <link> en nuxt.config.ts en app.head.link para una configuración de favicon centralizada y compatible con SSR.
Coloque favicon.ico en public/favicon.ico: Nuxt lo sirve automáticamente sin configuración adicional.
En nuxt.config.ts, extienda app.head.link con entradas de íconos: {rel: 'icon', tipo: 'image/png', tamaños: '32x32', href: '/favicon-32x32.png' }.
Use useHead() en un diseño solo cuando los íconos varían según la ruta; la mayoría de los sitios configuran íconos globales una vez en nuxt.config.
Para @nuxtjs/seo o módulos de configuración del sitio, siga su campo de favicon si está presente; incluye las mismas etiquetas de enlace.
Nuxt La imagen no procesa favicons; subir tallas finales al público/.
Cuando utilice el alojamiento estático preestablecido de Nitro, verifique que las rutas de favicon existan en .output/public después de generar nuxi.
Cómo funciona
- 1
Agregar archivos al público/
Tamaños favicon.ico, PNG, SVG opcional.
- 2
Configurar app.head.link
Centralizar enlaces de iconos en nuxt.config.ts.
- 3
Generar e inspeccionar HTML
Vea el código fuente en una página implementada para ver las etiquetas correctas.
Pruébalo ahora
Construya su paquete de iconos Nuxt
Generador de paquete faviconPreguntas frecuentes
Nuxt todavía muestra el ícono predeterminado, ¿por qué?+
Borre el caché .nuxt, reemplace public/favicon.ico y reinicie el servidor de desarrollo.
¿Cómo agrego el ícono táctil de Apple en Nuxt 3?+
Agregue { rel: 'apple-touch-icon', tamaños: '180x180', href: '/apple-touch-icon.png' } a app.head.link.
¿SSR duplica las etiquetas de favicon?+
Evite definir el mismo enlace tanto en nuxt.config como en una llamada useHead a nivel de página.