Favicon für React
React rendert den <head> nicht für Sie – das Favicon wird in der index.html verwaltet. Legen Sie Ihre favicon.ico in /public ab und verlinken Sie sie. Moderne Setups liefern zusätzlich SVG- und PNG-Varianten aus.
Sowohl Vite als auch CRA stellen /public im Root bereit, sodass /favicon.ico der Standard-Erkennungspfad ist. Keine Bundler-Konfiguration erforderlich.
Für High-DPI-Displays und PWA-Installationsdialoge ergänzen Sie ein 180×180-apple-touch-icon und ein 512×512-PNG in /public und verlinken beides in der index.html.
So funktioniert es
- 1
Mehrgrößen-.ico erzeugen
Nutzen Sie unseren Favicon-Generator mit einer 512×512-Vorlage.
- 2
Dateien in /public ablegen
favicon.ico, favicon.svg und apple-touch-icon.png dort platzieren.
- 3
In index.html verlinken
<link rel="icon" href="/favicon.ico"> und <link rel="icon" type="image/svg+xml" href="/favicon.svg"> einfügen.
Jetzt ausprobieren
React-kompatibles Favicon erstellen
Favicon-GeneratorFAQ
Wo liegt das Favicon in einer Vite-React-App?+
/public/favicon.ico (und /public/favicon.svg für eine Vektor-Variante).
Wie richte ich ein Dark-Mode-Favicon ein?+
Verwenden Sie ein einzelnes SVG mit einem <style>@media (prefers-color-scheme: dark) {...}</style>-Block.
Warum wird mein Favicon im Dev-Server nicht geladen?+
Leeren Sie den Browser-Cache mit Strg+F5. Browser speichern /favicon.ico pro Origin, selbst über Reloads hinweg.