Cómo agregar un favicon en nextjs app router rápidamente

Si alguna vez has abierto un sitio Next.js construido con el App Router y has visto un icono genérico en la pestaña del navegador, la falta de favicon probablemente se deba a una configuración incompleta de metadata.

Requisitos previos

• Un proyecto Next.js 13+ que use el directorio app.
• Node.js 18 o superior instalado localmente.
• Un conjunto de iconos (SVG, PNG, ICO) generado con Mzu favicondl. La guía de tamaños de favicon puede ayudarte a elegir las dimensiones correctas.

Implementación paso a paso

1. Generate the icon files. Use Mzu favicondl to create at least three files:
   • favicon.svg – el formato escalable preferido.
   • favicon.ico – fallback legado para navegadores que aún solicitan /favicon.ico.
   • apple-touch-icon.png – icono Apple Touch opcional.
   Guarda los archivos en la carpeta public del proyecto.
2. Export metadata in app/layout.tsx. El App Router lee una exportación metadata de los archivos de layout. Añade un objeto icons que haga referencia a los archivos que acabas de colocar.

   <pre><code>export const metadata = {
     title: 'My Next.js Site',
     icons: {
       icon: '/favicon.ico', // legacy fallback
       shortcut: '/favicon.ico', // shortcut icon for older browsers
       apple: '/apple-touch-icon.png', // Apple Touch icon (optional)
       other: [
         { rel: 'icon', url: '/favicon.svg', type: 'image/svg+xml', sizes: 'any' }
       ]
     }
   };
   </code></pre>

   Esto coincide con el enfoque oficial de metadata basado en archivos documentado por Next.js.
3. Verify the generated <head> output. Ejecuta npm run dev y abre el código fuente de la página. Deberías ver etiquetas link similares a:

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

   Las etiquetas se generan automáticamente; no necesitas escribirlas a mano.
4. Test in multiple browsers. Abre el sitio en Chrome, Safari y Firefox. Cada uno debería mostrar el icono SVG en pantallas de alta densidad y recurrir al archivo ICO en versiones más antiguas.
   • Chrome prefiere SVG cuando está presente type='image/svg+xml'.
   • Safari usa el Apple Touch icon para accesos directos en la pantalla de inicio.
   • Firefox respeta la entrada rel='icon' y almacenará en caché el archivo ICO si falta el SVG.
5. Deploy. Envía los cambios a tu proveedor de hosting (Vercel, Netlify, etc.). La carpeta public se sirve de forma estática, por lo que los iconos están disponibles inmediatamente después de la primera compilación.

Problemas comunes

• Missing public folder path. Si los iconos están fuera de public, las URLs generadas apuntarán a una ubicación inexistente y los navegadores registrarán errores 404.
• Using only rel='shortcut icon'. Los navegadores modernos siguen la especificación rel='icon' (HTML spec). Depender únicamente del atributo legado puede hacer que el SVG sea ignorado.
• Cache‑related stale icons. Los navegadores almacenan en caché agresivamente favicon.ico. Añade una cadena de consulta (p.ej., /favicon.ico?v=2) o habilita el hash de contenido en tu compilación para forzar una actualización.
• Incorrect MIME type. Sirve .svg con image/svg+xml y .ico con image/x-icon. Un servidor mal configurado hará que los navegadores rechacen el archivo.

Conclusión

Al permitir que el App Router genere las etiquetas <link> a partir de una única exportación metadata, mantienes la configuración del favicon declarativa y preparada para el futuro. Los pasos anteriores cubren la generación, ubicación, exportación de metadata, verificación y despliegue, de modo que puedas pasar de una pestaña vacía a una presencia de marca pulida en minutos.

¿Necesitas una forma rápida de crear los archivos SVG y ICO? Prueba Mzu favicondl; genera el conjunto exacto de archivos necesario para el enfoque del App Router.

Revisa los requisitos documentados

Next.js documenta favicons y app icons en sus convenciones de archivos de metadata.