Bester Favicon-Generator für React
Eine reine React-App (Vite oder Create React App) hat keine eingebaute Icon-Konvention. Du legst Dateien in den public-Ordner und schreibst die Link-Tags in der index.html selbst. Der richtige Generator liefert dir beides, sodass nichts zu raten bleibt.
Worauf es bei React wirklich ankommt
React selbst rendert nichts im Dokument-Head für dich. Das Icon liegt im public-Ordner und wird in der index.html deklariert, der Generator muss also sowohl die Dateien als auch die exakten Tags zum Einfügen erzeugen. Ein Tool, das dir Bilder, aber kein Markup gibt, lässt genau die Hälfte weg, die tatsächlich kaputtgeht.
Der häufige Fehler ist eine einzelne favicon.ico und sonst nichts, was den Desktop-Tab abdeckt, iOS und Android aber auf ihren Fallbacks lässt. Ein komplettes Set plus die passenden Tags ist das, was das Icon überall erscheinen lässt, wo es soll.
Die Kriterien, die bei React zählen
| Worauf du achten solltest | Warum es bei React zählt | Wie der Generator hier es löst |
|---|---|---|
| Dateien plus Tags | React deklariert nichts im Head für dich | Exportiert die public-Ordner-Dateien und die Tags zum Einfügen in die index.html |
| Komplettes Größen-Set | Eine ICO lässt Mobile auf Fallbacks | favicon.ico, jedes PNG, apple-touch und Android-Größen |
| Manifest inklusive | PWA-Installationen lesen Icons aus dem Manifest | Liefert manifest.json, verkabelt mit den exportierten Größen |
| Vite oder CRA | Beide liefern public-Assets auf dieselbe Weise aus | Die Anleitung funktioniert für Vite und Create React App gleichermaßen |
Der Generator vs. eine einzelne favicon.ico
Ein komplettes Set plus die Tags
Start hereempfohlen
- Jede Größe, vom 16px-Tab bis zum 512er Install-Icon
- Die exakten Link- und Manifest-Tags zum Einfügen
- apple-touch-Icon, sodass iOS-Startbildschirme abgedeckt sind
- manifest.json, verkabelt für Android- und PWA-Installationen
Nur eine favicon.ico ablegen
- Deckt den Desktop-Tab ab und nicht mehr
- iOS fällt auf dem Startbildschirm auf einen Screenshot zurück
- Android-Installationen zeigen ein generisches Icon
- Kein Manifest, also sieht der PWA-Prompt unfertig aus
Wohin gehören Favicon-Dateien in einer React-App?
In den public-Ordner, referenziert von Link-Tags in der index.html. Weder Vite noch Create React App injizieren Icon-Markup für dich, der Generator muss dir die Dateien und die Tags also zusammen geben. Dateien in public werden vom Site-Root ausgeliefert, ein Tag wie /favicon.ico löst also direkt auf.
The step-by-step for React
You've picked the tool. Here's the exact install for React.