Favicons in React-Apps konfigurieren

Konfigurieren Sie statische Markenelemente in Single-Page-React-Apps. Erfahren Sie, wie Sie öffentliche Ordner zuordnen.

Wo Sie Favicon-Dateien in React ablegen

Unabhängig davon, ob Sie Vite, Create React App oder Next.js verwenden, gehören alle statischen Dateien wie Favicons in das Verzeichnis public/ im Stammverzeichnis Ihres Projekts.

  1. Konvertieren Sie Ihre PNG-Datei mit unserem Homepage-Generator, um die Dateien als ZIP-Datei zu erhalten.
  2. Extrahieren Sie alle Dateien direkt in den Ordner public/ im Stammverzeichnis Ihres React-Projekts.
  3. Öffnen Sie die Datei index.html (im Stammverzeichnis des Projekts bei Vite oder in public/ bei Create React App).
  4. Fügen Sie die Standard-HTML-Head-Meta-Tags hinzu oder ändern Sie sie und verweisen Sie relative URLs auf das öffentliche Verzeichnis:
<link rel="icon" type="image/x-icon" href="/favicon.ico"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">