Web Professionals Logo

Favicon-Erstellung für Web Professionals ​

Benötigte Favicon-Dateien: ​

1. apple-touch-icon-180x180.png (180x180px) ​

  • Format: PNG
  • Größe: 180x180 Pixel
  • Verwendung: iOS Safari, Home Screen Icon
  • Pfad: /docs/public/favicons/apple-touch-icon-180x180.png

2. favicon-32x32.png (32x32px) ​

  • Format: PNG
  • Größe: 32x32 Pixel
  • Verwendung: Desktop Browser Tabs
  • Pfad: /docs/public/favicons/favicon-32x32.png

3. favicon-16x16.png (16x16px) ​

  • Format: PNG
  • Größe: 16x16 Pixel
  • Verwendung: Browser Bookmarks, kleinste Darstellung
  • Pfad: /docs/public/favicons/favicon-16x16.png

4. android-icon-192x192.png (192x192px) ​

  • Format: PNG
  • Größe: 192x192 Pixel
  • Verwendung: Android Chrome, PWA Icon
  • Pfad: /docs/public/favicons/android-icon-192x192.png

5. favicon-96x96.png (96x96px) ​

  • Format: PNG
  • Größe: 96x96 Pixel
  • Verwendung: Desktop Browser, größere Darstellung
  • Pfad: /docs/public/favicons/favicon-96x96.png

Aktueller Status: ​

✅ Alle benötigten Favicon-Dateien sind bereits im /docs/public/favicons/ Ordner vorhanden! ✅ Das site.webmanifest wurde aktualisiert und verweist auf die korrekten Pfade.

Vorhandene Icon-Dateien: ​

  • android-icon-192x192.png
  • apple-touch-icon-114x114.png
  • apple-touch-icon-120x120.png
  • apple-touch-icon-144x144.png
  • apple-touch-icon-152x152.png
  • apple-touch-icon-180x180.png
  • apple-touch-icon-57x57.png
  • apple-touch-icon-60x60.png
  • apple-touch-icon-72x72.png
  • apple-touch-icon-76x76.png
  • favicon-16x16.ico
  • favicon-16x16.png
  • favicon-32x32.ico
  • favicon-32x32.png
  • favicon-96x96.ico
  • favicon-96x96.png
  • mstile-150x150.png
  • mstile-310x310.png
  • mstile-70x70.png

Empfohlene Tools für die Erstellung: ​

Option 1: Online Favicon Generator ​

  1. Gehen Sie zu https://realfavicongenerator.net/
  2. Laden Sie Ihr Logo hoch
  3. Generieren Sie alle benötigten Größen automatisch
  4. Laden Sie das ZIP herunter und extrahieren Sie die Dateien

Option 2: Manuell mit Bildbearbeitungssoftware ​

  1. Öffnen Sie Ihr bestehendes Logo
  2. Skalieren Sie es auf die jeweiligen Größen
  3. Exportieren Sie als PNG mit Transparenz

Option 3: Kommandozeile (ImageMagick) ​

bash
# Aus Ihrem bestehenden Logo in den favicons Ordner
convert logo.png -resize 180x180 favicons/apple-touch-icon-180x180.png
convert logo.png -resize 32x32 favicons/favicon-32x32.png
convert logo.png -resize 16x16 favicons/favicon-16x16.png
convert logo.png -resize 192x192 favicons/android-icon-192x192.png
convert logo.png -resize 96x96 favicons/favicon-96x96.png

Nach der Erstellung: ​

  1. Alle Dateien in /docs/public/favicons/ ablegen
  2. Build testen: npm run docs:build
  3. Funktionalität überprüfen

SEO-Impact: ​

  • Bessere Browser-Kompatibilität
  • Professionelleres Erscheinungsbild
  • Optimierte PWA-Unterstützung