Favicon en Next.js: La guía moderna para el App Router

Acabas de crear un nuevo proyecto en Next.js, pones un favicon.ico en la carpeta public y... nada. O peor, funciona en local pero se rompe en producción. ¿Qué está pasando?

Si esto te suena, probablemente te has topado con la diferencia entre el antiguo pages router y el moderno App Router. La buena noticia es que la nueva forma es mucho más simple y potente una vez que conoces la convención.

El método oficial: metadatos basados en archivos

Olvídate de añadir manualmente etiquetas <link> a tu layout.tsx. El App Router de Next.js utiliza un sistema especial basado en archivos. Colocas archivos de icono con nombres específicos en tu directorio app, y Next.js genera automáticamente las etiquetas HTML necesarias en el head por ti.

Este es mi enfoque recomendado. Es más limpio, menos propenso a errores y aprovecha las optimizaciones integradas del framework.

Paso a paso: Añadiendo tu favicon

Hagamos esto en menos de cinco minutos. No se necesitan requisitos previos, más allá de un proyecto Next.js que utilice el App Router.

Paso 1: Prepara tus archivos de icono

Necesitas algunos archivos clave para una amplia compatibilidad. Aunque puedes crearlos tú mismo, un generador asegura que tengan el tamaño y formato correctos. (Autopromoción descarada: nuestro generador de favicons gratuito se encarga de esto perfectamente).

Paso 2: Coloca los iconos en la raíz del directorio `app`

Este es el paso más importante. Mueve tus iconos generados directamente a la carpeta /app. No los pongas en la carpeta /public.

La estructura de tu proyecto debería verse así:

app/
├── layout.tsx
├── page.tsx
├── favicon.ico       <-- Para navegadores antiguos
├── icon.svg          <-- Para navegadores modernos (recomendado)
└── apple-icon.png    <-- Para la pantalla de inicio de iOS
public/
└── ... (tus otros archivos estáticos)

Next.js detectará automáticamente estos archivos y generará las etiquetas <link> correspondientes en el <head> de tu sitio.

Paso 3: Elimina cualquier declaración antigua o manual

Si tienes un favicon.ico antiguo en tu carpeta public, bórralo. El archivo en /app tiene prioridad, pero es mejor evitar confusiones.

Además, revisa tu layout.tsx raíz y elimina cualquier etiqueta <link rel="icon" ...> que hayas añadido manualmente. El método basado en archivos las hace redundantes.

Paso 4: Verifica el resultado

Ejecuta tu servidor de desarrollo (npm run dev) e inspecciona el código fuente de tu página. Deberías ver que Next.js ha generado las etiquetas por ti, algo como esto:

<head>
  ...
  <link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="any">
  <link rel="icon" href="/icon.svg" type="image/svg+xml" sizes="any">
  <link rel="apple-touch-icon" href="/apple-icon.png" type="image/png" sizes="any">
  ...
</head>

Ver estas etiquetas significa que está funcionando. El framework se encargó de todo.

Ejemplo real: Cómo lo hace GitHub

¿Tienes curiosidad por saber cómo lo manejan los profesionales? Echa un vistazo a GitHub. Sirven un favicon.ico, múltiples tamaños de PNG para diferentes dispositivos y un SVG monocromático especial para el icono de pestaña fijada de Safari. El enfoque basado en archivos de Next.js está diseñado para construir este tipo de soporte robusto y multidispositivo automáticamente, ahorrándote el tener que escribir todas esas etiquetas <link> a mano.

Errores comunes que debes evitar

Si tu icono no aparece, normalmente es por una de estas tres cosas.

1. La trampa de la carpeta `public`

De nuevo, para archivos de metadatos como los favicons, el directorio app es el lugar correcto en el Next.js moderno. Aunque la carpeta public sigue funcionando para archivos estáticos generales, los iconos colocados en /app tienen un significado especial y tienen prioridad.

2. El caché agresivo del navegador

Tu código es perfecto, pero sigues viendo el icono antiguo (o ningún icono). Esto es casi siempre culpa del navegador. Los navegadores guardan en caché los favicons de forma muy agresiva.

Una simple recarga de la página a menudo no es suficiente. Necesitarás hacer una recarga forzada o limpiar la caché de tu navegador. Escribimos una guía detallada sobre cómo forzar la limpieza de la caché del favicon si te quedas atascado.

3. Nombres de archivo incorrectos

Los nombres favicon.ico, icon.png, icon.svg y apple-icon.png no son arbitrarios. Son convenciones que Next.js busca específicamente. Un error tipográfico como mi-icono.svg no será detectado automáticamente.

Y eso es todo. Al adoptar la convención basada en archivos, estás trabajando con el framework, no contra él. Obtienes HTML optimizado y correcto de forma gratuita, y tu proyecto se mantiene limpio. No más peleas con las etiquetas del <head> solo para que tu marca aparezca en la pestaña de un navegador.