Ein Favicon ist ein kleines Icon, das Ihre Website in Browser-Tabs repräsentiert. Für Progressive Web Apps (PWA) benötigen Sie außerdem ein Web-Manifest und größere Icons für mobile Startbildschirme.
Favicon- und PWA-Dateien einbinden
Die Web-ZIP enthält favicon.ico, 16/32-px-PNGs, ein 180-px-Apple-Touch-Symbol, 192/512-px-PWA-Symbole, site.webmanifest und og.png mit 1200x630.
Dateien der Web-ZIP
Die beiden PWA-PNGs sind normale quadratische Symbole. Namen und Größen entsprechen dem icons-Array in site.webmanifest; og.png ist ein separates Vorschaubild zum Teilen.
Symbole in die Website einbinden
- Kopiere die Web-Dateien in das öffentliche Verzeichnis und veröffentliche sie im Stamm der Domain oder passe die Pfade an dein Verzeichnis an.
- Ändere name und short_name in site.webmanifest. start_url und scope sind relativ zum Manifest; die exportierten Icon-Pfade beginnen mit /. Passe sie bei einem Unterverzeichnis an.
- Füge Manifest-, Favicon- und Apple-Touch-Verweise in den HTML-head ein. Nutze HTTPS oder localhost. Prüfe in den Browser-Entwicklertools das Manifest und ob jede Icon-URL ein Bild statt einer HTML-Ersatzseite liefert.
<link rel="manifest" href="/site.webmanifest">
<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">Diese Symbole sind nicht als maskierbare Motive vorbereitet. Die ZIP ergänzt weder Service Worker noch Offline-Unterstützung; Icons allein garantieren keine Installation. Teste Zielbrowser und Gerät.
Anleitung zur Web-, PWA- und Chrome-Integration lesen