Configuration des favicons dans Next.js

Les frameworks modernes nécessitent des stratégies de balises meta modernes. Configurez correctement les icônes de votre navigateur dans Next.js.

Méthode 1 : Next.js App Router (API metadata)

Dans les versions récentes de Next.js (App Router à partir de la version 13), vous pouvez placer vos fichiers d’icônes directement à la racine de votre répertoire d’application :

  • app/favicon.ico (Correspondance automatique avec les anciennes icônes)
  • app/icon.png (Génère les liens favicon dynamiquement)
  • app/apple-icon.png (Utilisé pour les icônes de l’écran d’accueil Apple)

Vous pouvez également déclarer les icônes dans votre fichier layout.js racine à l’aide de l’API metadata :

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

Méthode 2 : Pages Router ou liens HTML

Si vous utilisez Pages Router, modifiez votre fichier _document.js dans le répertoire pages et ajoutez les métadonnées standard :

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>
  )
}