Favicon del Head en Nuxt: Guía de useHead y app.head

Has lanzado una aplicación Nuxt y el favicon por defecto todavía aparece en la pestaña del navegador. Peor aún, tu equipo de marketing quiere iconos diferentes en la página de pago y en el panel de administración. Hardcodear etiquetas link no es suficiente: Nuxt te da control programático a través de la configuración app.head y el composable useHead. Entender ambos es la diferencia entre luchar contra tu framework y dejar que trabaje para ti.

Esta guía se centra específicamente en gestionar tu favicon mediante el sistema de configuración de head de Nuxt, no en el enfoque de metadatos basado en archivos que cubrimos en nuestra guía de favicon para Nuxt. Si necesitas iconos por página, alternancia de modo oscuro o cambios en tiempo de ejecución, la API de head es lo que buscas.

Prerrequisitos

Proyecto Nuxt 3.x o 4.x
Archivos de favicon generados (PNG, SVG, ICO) — consulta nuestra guía de tamaños de favicon si no estás seguro de cuáles necesitas
Familiaridad básica con bloques <script setup> de Vue 3

Paso 1: Establecer un favicon por defecto mediante app.head

La propiedad app.head en nuxt.config.ts es el valor por defecto a nivel de framework. Todo lo que pongas aquí se inyecta en el <head> de cada página, a menos que una página lo sobrescriba.

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      link: [
        { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' },
        { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32x32.png' },
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
        { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' }
      ]
    }
  }
})

Coloca tus archivos de icono en el directorio public/ para que Nuxt los sirva desde la raíz. Según la documentación de SEO y meta de Nuxt, el array link sigue la misma forma que acepta el motor subyacente unhead, que a su vez coincide con la especificación WHATWG para rel="icon" en html.spec.whatwg.org.

Paso 2: Sobrescribir el favicon por página con useHead

A veces quieres un icono diferente en rutas específicas. El composable useHead te permite insertar entradas que sobrescriben la configuración global solo para esa página.

&lt;script setup lang="ts"&gt;
useHead({
  link: [
    { rel: 'icon', type: 'image/svg+xml', href: '/icons/admin-favicon.svg' }
  ]
})
&lt;/script&gt;

&lt;template&gt;
  &lt;div&gt;Panel de administración&lt;/div&gt;
&lt;/template&gt;

Llama a useHead() al inicio de tu bloque <script setup>. Nuxt maneja la inyección SSR, por lo que la sobrescritura está presente en el HTML inicial — sin parpadeo del icono incorrecto durante la hidratación, sin necesidad de parcheo en el cliente.

Paso 3: Intercambiar favicons dinámicamente según el estado

¿Quieres que el favicon reaccione a un contador de notificaciones o a un cambio de tema? Combina useHead con un ref reactivo o un computed.

&lt;script setup lang="ts"&gt;
const cartCount = useCartCount()

useHead({
  link: [
    {
      rel: 'icon',
      type: 'image/svg+xml',
      href: computed(() =&gt;
        cartCount.value > 0
          ? `/icons/cart-${cartCount.value}.svg`
          : '/favicon.svg'
      )
    }
  ]
})
&lt;/script&gt;

El href computado se actualiza cada vez que cambia cartCount. El useHead de Nuxt rastrea la reactividad y reescribe la etiqueta <link> en su lugar — sin recargar la página, sin manipulación manual del DOM. Si quieres llevar esto más allá con insignias basadas en canvas, el patrón subyacente se cubre en nuestra guía de favicon dinámico con JavaScript.

Paso 4: Soporte de favicons en modo oscuro

Los navegadores modernos respetan los atributos media en los enlaces de icono. Combínalo con useHead y obtendrás iconos conscientes del tema sin necesidad de JavaScript.

useHead({
  link: [
    { rel: 'icon', type: 'image/svg+xml', href: '/favicon-light.svg', media: '(prefers-color-scheme: light)' },
    { rel: 'icon', type: 'image/svg+xml', href: '/favicon-dark.svg', media: '(prefers-color-scheme: dark)' }
  ]
})

El navegador elige el correcto según la preferencia del sistema del usuario. Este es el mismo patrón descrito en nuestra guía de favicon en modo oscuro, pero impulsado a través de la API de head de Nuxt en lugar de HTML crudo.

Errores comunes

Poner useHead en un componente hijo profundamente anidado. Aún funciona, pero el tiempo de SSR se vuelve impredecible y corres el riesgo de etiquetas duplicadas. Mantenlo en el <script setup> a nivel de página.
Olvidar el atributo type. Cuando múltiples enlaces rel="icon" comparten una ruta o nombre de archivo, los navegadores pueden servir el archivo incorrecto. Siempre establece type para mayor claridad.
Mezclar metadatos basados en archivos con useHead. Los iconos basados en archivos de Nuxt (en app/ o public/) pueden colisionar con entradas explícitas de app.head y producir etiquetas <link> duplicadas. Elige un enfoque por proyecto.
Rutas absolutas hardcodeadas. Usa rutas relativas a la raíz como /favicon.svg para que el icono se cargue correctamente en todas las rutas, subdominios y detrás de proxies inversos.

Conclusión

La configuración app.head maneja tus valores por defecto; useHead maneja todo lo dinámico. Juntos cubren todos los escenarios de favicon que las aplicaciones Nuxt suelen necesitar — desde un icono estático único hasta intercambios por página e insignias reactivas — sin recurrir a plugins de head de terceros ni luchar contra los valores por defecto de Nuxt.

Si aún no has generado tus archivos de icono, Mzu favicondl produce el paquete completo de múltiples resoluciones (SVG, PNG, ICO, Apple Touch) con un clic. Coloca los archivos en public/, conéctalos en app.head, y tus pestañas se verán profesionales en cuestión de minutos.