Favicons in Next.js konfigurieren

Moderne Frameworks erfordern moderne Meta-Tag-Strategien. Konfigurieren Sie Ihre Browser-Icons korrekt in Next.js.

Methode 1: Next.js App Router (Metadaten-API)

In modernen Next.js-Versionen (ab Version 13 mit App Router) können Sie Ihre Icon-Dateien direkt im Stammverzeichnis Ihrer App ablegen:

  • app/favicon.ico (Automatische Legacy-Fallback-Zuordnung)
  • app/icon.png (Generiert dynamisch Favicon-Links)
  • app/apple-icon.png (Wird für Apple-Homescreen-Icons verwendet)

Alternativ können Sie Icons in Ihrer layout.js-Datei im Stammverzeichnis mithilfe der Metadaten-API deklarieren:

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

Methode 2: Pages Router oder HTML-Links

Wenn Sie den Pages Router verwenden, bearbeiten Sie Ihre _document.js-Datei im Verzeichnis „pages“ und fügen Sie Standard-Meta-Markup hinzu:

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