Favicon
Ein Favicon ist das kleine Marken-Icon, das im Browser-Tab, in Lesezeichen und teils in Google-Suchergebnissen neben deiner Seite erscheint.
Ein Favicon (von «favorite icon») ist das kleine, quadratische Symbol, das deine Website im Browser-Tab, in der Lesezeichen-Liste, im Verlauf und auf vielen Geräten als Icon repräsentiert. Es ist meist eine reduzierte Form deines Logos oder ein Markenbuchstabe. Technisch wird das Favicon im <head> des HTML-Codes über ein Link-Element eingebunden, zum Beispiel <link rel="icon" href="/favicon.svg">. Moderne Browser unterstützen neben dem klassischen .ico-Format auch PNG und SVG, das sich verlustfrei skalieren lässt.
Warum ein Favicon wichtig ist
Das Favicon ist ein kleines, aber wirksames Branding-Element. Bei Nutzern mit vielen offenen Tabs entscheidet oft nur das Icon darüber, ob sie deine Seite wiederfinden – ohne Favicon erscheint nur ein blasses Standard-Symbol, das beliebig wirkt. Seit einigen Jahren zeigt Google das Favicon zudem direkt in den mobilen Suchergebnissen neben deinem Treffer an. Ein klares, erkennbares Icon stärkt damit Wiedererkennung und Vertrauen genau an dem Punkt, an dem die CTR (Klickrate) entsteht. Fehlt es oder ist es unscharf, wirkt der Auftritt schnell unprofessionell.
Wie es in der Praxis funktioniert
Ein sauberes Favicon-Setup deckt heute mehrere Geräte und Kontexte ab:
- Mehrere Formate bereitstellen: ein
favicon.icoals Fallback, dazu PNG in mehreren Grössen sowie idealerweise ein SVG für scharfe Darstellung auf allen Bildschirmen. - Apple Touch Icon: ein
apple-touch-icon.png(180×180 px) für den Home-Bildschirm auf iOS-Geräten. - Web App Manifest: eine
manifest.jsonmit Icon-Angaben für Android und Progressive Web Apps. - Klar erkennbar bei 16×16 px: Details, die im Mini-Format verschwinden, weglassen – reduziere auf Form und Markenfarbe.
- Theme-Color setzen: über das
theme-color-Meta-Tag passt sich die Browser-Leiste deiner Markenfarbe an.
Damit Google das Favicon übernimmt, muss es über eine vom Crawler erreichbare URL eingebunden, mindestens 48×48 px gross und auf der Startseite verlinkt sein. Nach Änderungen kann es einige Tage dauern, bis das neue Icon in der Suche erscheint.
Praxis-Bezug für Schweizer KMU
Für ein KMU ist das Favicon ein günstiges Detail mit überraschend grosser Wirkung auf den professionellen Gesamteindruck. In der Praxis fehlt es auf vielen Websites oder es wird nur ein einzelnes, verpixeltes .ico hinterlegt – auf Retina-Displays und in der mobilen Google-Suche sieht das schlecht aus. Wer stattdessen ein konsistentes Icon-Set aus dem eigenen Logo ableitet, sorgt dafür, dass die Marke vom Browser-Tab bis zum Suchergebnis einheitlich auftritt. So zahlt schon dieses kleine Element auf einen stimmigen, vertrauenswürdigen Webauftritt ein.