Bester Favicon-Generator für Next.js
Next.js verwendet keine Link-Tags, die du von Hand schreibst. Der App Router liest Dateien namens icon, apple-icon und favicon aus dem app-Verzeichnis und injiziert das Markup zur Build-Zeit. Der richtige Generator liefert dir genau diese Dateien.
Worauf es bei Next.js wirklich ankommt
Der App Router löst Icons aus Dateien auf, nicht aus Tags. Eine Datei namens icon, apple-icon oder favicon im app-Verzeichnis wird automatisch dimensioniert und verlinkt. Die entscheidende Frage für einen Generator ist also, ob sein Output Dateien nach dieser Konvention benennt und platziert oder dir lose PNGs und einen Satz Link-Tags gibt, den das Framework gar nicht will.
Der Pages Router ist anders: Dort legst du Dateien in public ab und deklarierst die Tags in einem custom Head. Ein Generator, der weiß, auf welchem der beiden du bist, erspart dir den einen Fehler, der ein Next.js-Favicon stillschweigend nichts ausgeben lässt.
Die Kriterien, die bei Next.js zählen
| Worauf du achten solltest | Warum es bei Next.js zählt | Wie der Generator hier es löst |
|---|---|---|
| App-Router-Dateinamen | Icons lösen aus app/icon, app/apple-icon, app/favicon.ico auf | Exportiert Dateien, benannt und platziert nach dieser Konvention |
| Keine handgeschriebenen Tags | Das Framework injiziert die Link-Tags für dich | Überspringt die überflüssigen Tags, die ein generisches Tool hinzufügen würde |
| Manifest und Android | PWA-Installationen brauchen den vollen Größenbereich | Exportiert manifest.json plus die 192er und 512er Android-Icons |
| Router-bewusst | App und Pages lösen Icons unterschiedlich auf | Die Install-Anleitung deckt beide Router ab, nicht nur einen |
Wohin die Dateien gehören (App Router)
- app/
- favicon.icoaddServed at /favicon.ico, tag auto-injected
- icon.pngaddSized and linked at build
- apple-icon.pngadd180x180 home screen icon
- public/
- manifest.jsonaddPWA install metadata
- android-icon-192x192.pngadd
- android-icon-512x512.pngadd
Die mit add markierten Dateien sind die, die der Generator exportiert. Alles andere ist ein Standard-Next.js-Projekt.
Der Generator vs. die Next.js-Dateikonventionen allein
Ein Next.js-bewusster Generator
Start hereempfohlen
- Der Export entspricht der App-Verzeichnis-Konvention
- Erzeugt favicon.ico, jede PNG-Größe und apple-icon
- Enthält manifest.json und Android-Größen für PWA-Installationen
- Ein Quellbild, jede Größe korrekt gerendert
Selbst eine Datei ablegen
- app/favicon.ico allein deckt den Tab ab und sonst nichts
- Kein apple-touch-Icon, also fallen iOS-Startbildschirme zurück
- Kein Manifest, also sehen Android-Installationen unfertig aus
- Ein Bild von Hand zu skalieren liest sich bei 16px selten gut
Brauche ich Link-Tags für ein Favicon in Next.js?
Im App Router nicht. Dateien namens favicon.ico, icon und apple-icon im app-Verzeichnis werden zur Build-Zeit automatisch gelesen, dimensioniert und verlinkt. Ein Generator, der zusätzlich handgeschriebene Link-Tags ausgibt, fügt Markup hinzu, das das Framework bereits erzeugt. Der Pages Router ist die Ausnahme, dort deklarierst du die Tags in einem custom Head.
Welche Größen sollte der Generator für Next.js exportieren?
favicon.ico für den Tab, ein 180x180 apple-icon für iOS-Startbildschirme sowie 192er und 512er PNGs, die aus der manifest.json referenziert werden, für Android- und PWA-Installationen. Entwirf das Zeichen zuerst bei 16px, denn das ist die Größe, die entscheidet, ob es sich lesen lässt.
The step-by-step for Next.js
You've picked the tool. Here's the exact install for Next.js.