Favicon para Nuxt
Nuxt sirve archivos estáticos de /public en la raíz de su sitio, por lo que /public/favicon.ico se convierte en /favicon.ico automáticamente. Para íconos de varios tamaños o SVG, agregue etiquetas de enlace a través de nuxt.config.ts o useHead() en app.vue.
Respuesta rápida
Para añadir un favicon en Nuxt 3, coloca favicon.ico en /public, añade etiquetas link en app.head de nuxt.config.ts si hace falta, despliega y verifica con el comprobador de favicon — usa el generador para crear los archivos de icono.
Comprueba favicons en cualquier sitio
Instala la extensión FetchFavicon para Chrome para extraer, previsualizar y validar favicons al instante.
Cree su paquete de favicon con Favicon Generator: exporte favicon.ico, favicon.svg y apple-touch-icon.png desde una fuente de 512 × 512. Colóquelos en la carpeta /public de su proyecto Nuxt.
Nuxt 3 sirve todo en /public en la raíz del dominio sin configuración adicional. Los navegadores solicitan /favicon.ico de forma predeterminada, por lo que colocar el archivo allí cubre el caso más común.
Para un control explícito sobre cada variante de ícono, agregue etiquetas de enlace en nuxt.config.ts en app.head.link, o llame a useHead({ link: [...] }) en app.vue. Ambos enfoques inyectan etiquetas en el <head> de cada página.
Después de la implementación, abra su URL de producción en una ventana privada y ejecute Favicon Checker para confirmar /favicon.ico y sus rutas <link rel="icon"> devuelven 200. Los íconos de desarrollo en caché son una razón común por la que un favicon Nuxt no se muestra después de la implementación.
Si el ícono de pestaña funciona pero Google Search aún muestra un favicon en blanco, verifique que los enlaces de su página de inicio en vivo tengan un ícono cuadrado de al menos 48 × 48. Consulte nuestra guía de requisitos de favicon de Google para conocer las reglas de rastreo y tamaño.
Nuxt no genera automáticamente archivos .ico de varios tamaños; debe proporcionarlos. Utilice los respaldos de PNG vinculados en app.head para los mensajes de instalación de PWA y las pestañas de alto DPI.
Cómo funciona
- 1
Generate favicon files
Use the Favicon Generator to export favicon.ico and PNG variants from a 512×512 logo.
- 2
Añadir a /public
Copie favicon.ico (y favicon.svg, apple-touch-icon.png opcional) en su carpeta Nuxt /public.
- 3
Configurar y verificar
Agregue entradas app.head.link en nuxt.config.ts si es necesario, implemente y luego ejecute Favicon Checker en su URL activa.
Pruébalo ahora
Generate a Nuxt-ready favicon
Generador de FaviconPreguntas frecuentes
¿Cómo agrego un favicon en Nuxt 3?+
Coloque favicon.ico en /public, luego, opcionalmente, agregue etiquetas <link rel="icon"> en nuxt.config.ts en app.head.link o mediante useHead() en app.vue.
¿Dónde va el favicon en un proyecto Nuxt?+
El directorio /public. Los archivos allí se sirven desde la raíz de su dominio: /public/favicon.ico está disponible en /favicon.ico.
¿Por qué no se muestra mi favicon Nuxt?+
Causas comunes: archivo que no está en /public, ruta incorrecta en app.head, caché del navegador desde el desarrollador o verificación del host local en lugar de la URL implementada. Prueba en una ventana de incógnito.
¿Debo usar nuxt.config.ts o useHead() para favicons?+
Cualquiera de los dos funciona. nuxt.config.ts es mejor para íconos estáticos en todo el sitio; useHead() en app.vue si los iconos dependen del estado de ejecución o de la lógica por ruta.
¿Puedo usar un favicon SVG en Nuxt?+
Sí: coloque favicon.svg en /public y agregue { rel: 'icon', escriba: 'image/svg+xml', href: '/favicon.svg' } a app.head.link.