Favicon für Next.js
Der App Router ab Next.js 14 behandelt /app/icon.png und /app/favicon.ico als Konventionen: Dateien ablegen genügt – Next.js erzeugt die passenden Tags automatisch.
Legen Sie favicon.ico in /app ab – Next.js stellt die Datei unter /favicon.ico bereit und fügt das Link-Tag selbstständig ein.
Für Mehrgrößen- oder themenbezogene Icons nutzen Sie die Dateikonventionen icon.png, icon.svg und apple-icon.png im Verzeichnis /app. Next.js generiert die <link>-Tags anhand der Datei-Metadaten.
So funktioniert es
- 1
favicon.ico erzeugen
Mehrgrößen-Datei mit 16/32/48/64 px aus einer 512×512-Vorlage.
- 2
In /app ablegen
/app/favicon.ico wird automatisch ausgeliefert. Ergänzen Sie icon.png für HD.
- 3
Prüfen
Rufen Sie /favicon.ico im Browser auf – Next.js stellt die Datei ohne Konfiguration bereit.
Jetzt ausprobieren
Next.js-kompatibles Favicon erstellen
Favicon-GeneratorFAQ
Wohin gehören Icons im Next.js App Router?+
In das Verzeichnis /app. Der Dateiname (icon, apple-icon, favicon) bestimmt die Funktion.
Was gilt für den Pages Router?+
Dort legen Sie favicon.ico in /public ab und verlinken sie in _document.tsx.
Brauche ich trotzdem eine Mehrgrößen-.ico?+
Empfohlen – für Legacy-Browser-Support, insbesondere Edge im IE-Modus und Windows-Verknüpfungen.