106 lines
3.3 KiB
Markdown
106 lines
3.3 KiB
Markdown
# Favicon Setup Anleitung
|
|
|
|
Die Favicon-Dateien wurden erstellt. Um alle Formate zu generieren, folge diesen Schritten:
|
|
|
|
## Erstellte Dateien
|
|
|
|
✅ `favicon.svg` - Modernes SVG Favicon (bereits erstellt)
|
|
✅ `apple-touch-icon.svg` - SVG für Apple Touch Icon (bereits erstellt)
|
|
✅ `site.webmanifest` - Web App Manifest (bereits erstellt)
|
|
|
|
## Noch zu erstellen (PNG/ICO)
|
|
|
|
Du musst die folgenden PNG/ICO-Dateien aus dem SVG erstellen:
|
|
|
|
### Option 1: Online Converter verwenden
|
|
|
|
1. Gehe zu einem dieser Tools:
|
|
- https://realfavicongenerator.net/ (Empfohlen - generiert alle Formate)
|
|
- https://www.zenlytools.com/svg-to-ico
|
|
- https://svg-to-ico.org/
|
|
|
|
2. Lade `favicon.svg` hoch
|
|
|
|
3. Generiere folgende Dateien:
|
|
- `favicon.ico` (16x16, 32x32, 48x48)
|
|
- `favicon-16x16.png`
|
|
- `favicon-32x32.png`
|
|
- `apple-touch-icon.png` (180x180)
|
|
- `favicon-192x192.png` (für Web Manifest)
|
|
- `favicon-512x512.png` (für Web Manifest)
|
|
|
|
4. Speichere alle generierten Dateien im `client/public/` Ordner
|
|
|
|
### Option 2: Mit ImageMagick (Command Line)
|
|
|
|
```bash
|
|
# Installiere ImageMagick (falls nicht vorhanden)
|
|
# Windows: choco install imagemagick
|
|
# Mac: brew install imagemagick
|
|
# Linux: sudo apt-get install imagemagick
|
|
|
|
cd client/public
|
|
|
|
# Erstelle PNG-Varianten
|
|
magick favicon.svg -resize 16x16 favicon-16x16.png
|
|
magick favicon.svg -resize 32x32 favicon-32x32.png
|
|
magick apple-touch-icon.svg -resize 180x180 apple-touch-icon.png
|
|
magick favicon.svg -resize 192x192 favicon-192x192.png
|
|
magick favicon.svg -resize 512x512 favicon-512x512.png
|
|
|
|
# Erstelle ICO (mehrere Größen)
|
|
magick favicon.svg -define icon:auto-resize=16,32,48 favicon.ico
|
|
```
|
|
|
|
### Option 3: Mit Online Favicon Generator (Empfohlen)
|
|
|
|
1. Gehe zu: https://realfavicongenerator.net/
|
|
2. Klicke auf "Select your Favicon image"
|
|
3. Lade `favicon.svg` hoch
|
|
4. Konfiguriere die Optionen:
|
|
- iOS: Apple Touch Icon aktivieren
|
|
- Android Chrome: Manifest aktivieren
|
|
- Windows Metro: Optional
|
|
5. Klicke auf "Generate your Favicons and HTML code"
|
|
6. Lade das ZIP herunter
|
|
7. Extrahiere alle Dateien in `client/public/`
|
|
8. Kopiere die generierten `<link>` Tags in `index.html` (falls nötig)
|
|
|
|
## Verifizierung
|
|
|
|
Nach dem Erstellen aller Dateien:
|
|
|
|
1. Starte den Dev-Server: `npm run dev`
|
|
2. Öffne die Seite im Browser
|
|
3. Prüfe den Browser-Tab - das Favicon sollte angezeigt werden
|
|
4. Teste auf Mobile:
|
|
- iOS Safari: Zum Home-Bildschirm hinzufügen → Icon sollte erscheinen
|
|
- Android Chrome: Installiere als PWA → Icon sollte erscheinen
|
|
|
|
## Dateien im public/ Ordner
|
|
|
|
Nach Abschluss sollten folgende Dateien vorhanden sein:
|
|
|
|
```
|
|
client/public/
|
|
├── favicon.svg ✅
|
|
├── favicon.ico (zu erstellen)
|
|
├── favicon-16x16.png (zu erstellen)
|
|
├── favicon-32x32.png (zu erstellen)
|
|
├── apple-touch-icon.png (zu erstellen)
|
|
├── favicon-192x192.png (zu erstellen)
|
|
├── favicon-512x512.png (zu erstellen)
|
|
├── apple-touch-icon.svg ✅
|
|
└── site.webmanifest ✅
|
|
```
|
|
|
|
## Browser-Kompatibilität
|
|
|
|
- **Chrome/Edge**: Verwendet `favicon.svg` oder `favicon.ico`
|
|
- **Firefox**: Verwendet `favicon.svg` oder `favicon.ico`
|
|
- **Safari (Desktop)**: Verwendet `favicon.ico` oder PNG
|
|
- **Safari (iOS)**: Verwendet `apple-touch-icon.png`
|
|
- **Android Chrome**: Verwendet Icons aus `site.webmanifest`
|
|
|
|
Die aktuelle Konfiguration in `index.html` unterstützt alle modernen Browser!
|