Ein Favicon (Kurzform für „Favorite Icon") ist das kleine Symbol, das im Browser-Tab, in Lesezeichen und auf dem Startbildschirm erscheint. Es macht eine Webseite sofort wiedererkennbar und ist oft der erste visuelle Eindruck einer Marke.
Warum ein Favicon wichtig ist
- Es hilft Nutzern, den richtigen Tab in vielen offenen Fenstern sofort zu finden.
- Lesezeichen mit Symbol sind leichter zu unterscheiden.
- Auf mobilen Geräten erscheint es als App-Icon, wenn die Seite zum Startbildschirm hinzugefügt wird — wichtig für PWA-Erlebnisse.
Wie ein Favicon eingebunden wird
Das klassische Format ist favicon.ico im Wurzelverzeichnis der Webseite — viele Browser suchen es automatisch. Moderner ist die Einbindung über ein link-Element im HTML-Head, das auch PNG- oder SVG-Varianten unterstützt:
<link rel="icon" type="image/svg+xml" href="/favicon.svg">Gute Praxis
- Das Symbol klein denken: Es wird oft nur 16×16 oder 32×32 Pixel groß dargestellt — einfache Formen lesen besser.
- Zusätzlich eine größere Variante (etwa 180×180) für den Startbildschirm bereitstellen.
- Nach dem Austausch den Cache im Blick behalten: Browser speichern Favicons lange und zeigen sonst das alte Symbol.