Configuración de favicons en Next.js

Los frameworks modernos requieren estrategias de metaetiquetas modernas. Configura correctamente los iconos de tu navegador en Next.js.

Método 1: Enrutador de aplicaciones de Next.js (API de metadatos)

En Next.js moderno (enrutador de aplicaciones versión 13 o superior), puedes colocar los archivos de iconos directamente en la raíz del directorio de tu aplicación:

  • app/favicon.ico (Mapeo automático de compatibilidad con versiones anteriores)
  • app/icon.png (Genera enlaces de favicon dinámicamente)
  • app/apple-icon.png (Se usa para los iconos de la pantalla de inicio de Apple)

Alternativamente, puedes declarar los iconos en tu archivo layout.js raíz usando la API de metadatos:

export const metadata = {
  title: 'My App',
  icons: {
    icon: '/favicon-32x32.png',
    shortcut: '/favicon.ico',
    apple: '/apple-touch-icon.png',
  },
};

Método 2: Pages Router o enlaces HTML

Si usa Pages Router, edite su archivo _document.js dentro del directorio pages e incluya el marcado meta estándar:

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html lang="en">
      <Head>
        <link rel="icon" href="/favicon.ico" />
        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}