Favicon

Ein Favicon (von "favorite icon") ist das kleine, quadratische Symbol, das deine Website im Browser-Tab, in der Lesezeichenliste, im Verlauf und auf vielen Geräten als Icon darstellt. Meist ist es eine reduzierte Form deines Logos oder ein einzelner Buchstabe der Marke. 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. Wer viele Tabs offen hat, findet deine Seite oft nur über das Icon wieder. Ohne Favicon zeigt der Browser ein graues Standardsymbol, das keiner Marke zugeordnet werden kann. Google zeigt das Favicon zudem in den Suchergebnissen neben deinem Treffer an. Ein klares Icon stärkt damit Wiedererkennung und Vertrauen an der Stelle, an der über den Klick entschieden wird, und kann so die CTR (Klickrate) verbessern. Fehlt es oder ist es unscharf, wirkt der Auftritt unprofessionell.

Wie es in der Praxis funktioniert

Ein vollständiges Favicon-Setup deckt mehrere Geräte und Kontexte ab:

• Mehrere Formate bereitstellen: ein favicon.ico als Rückfallebene, dazu PNG in mehreren Grössen und idealerweise ein SVG für eine 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.json mit Icon-Angaben für Android und Progressive Web Apps.
• Erkennbar bei 16 × 16 px: Details, die im kleinen Format verschwinden, weglassen und auf Form und Markenfarbe reduzieren.
• Theme-Color setzen: Über das theme-color-Meta-Tag passt sich die Browserleiste deiner Markenfarbe an.

Damit Google das Favicon übernimmt, muss es über eine für den 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.

Favicon-Grössen und Formate im Überblick

Ein einziges Bild reicht nicht mehr, weil Browser, Smartphones und Google unterschiedliche Grössen verlangen. Diese Dateien decken alle üblichen Fälle ab:

Datei	Grösse	Wofür
favicon.ico	16, 32 und 48 px in einer Datei	Rückfallebene, Browser fragen /favicon.ico automatisch ab
icon.svg	skalierbar	scharfe Darstellung auf allen Bildschirmen, auch im Dunkelmodus
icon.png	48 × 48 px oder ein Vielfaches (96, 144, 192)	Browser-Tab und Google-Suche
apple-touch-icon.png	180 × 180 px	Startbildschirm auf iPhone und iPad
Icons im Web App Manifest	192 × 192 und 512 × 512 px	Android und Progressive Web Apps

Die Favicon-Grösse für Google: Das Bild muss quadratisch sein. Mindestens 8 × 8 Pixel sind erlaubt, Google empfiehlt aber deutlich mehr als 48 × 48 Pixel, damit es auf allen Geräten scharf bleibt.

Favicon einbinden: der Code

Im <head> jeder Seite, mindestens aber der Startseite, stehen die Verweise:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">

Moderne Systeme nehmen einem Arbeit ab. In Next.js genügt es, die Dateien icon.png und apple-icon.png in den App-Ordner zu legen, die Link-Elemente entstehen dann automatisch. WordPress bietet unter "Design" beim Website-Icon ein Upload-Feld, Baukästen wie Wix haben eine eigene Einstellung.

Favicon erstellen: so gehst du vor

1. Vom Logo ausgehen, aber reduzieren: Bildmarke oder Anfangsbuchstabe statt Schriftzug. Text ist bei 16 Pixeln nicht mehr lesbar.
2. Auf Fläche achten: Das Motiv füllt das Quadrat weitgehend aus, mit kräftigem Kontrast zum Hintergrund. Ein dünnes Logo verschwindet im Tab.
3. Hell und dunkel testen: Browser und Google zeigen das Icon auf hellem und dunklem Grund. Ein SVG kann per CSS-Media-Query für den Dunkelmodus eine zweite Farbe mitbringen.
4. Exportieren: Ein SVG als Master, daraus PNG-Grössen und eine ICO-Datei, zum Beispiel mit einem Generator wie favicon.io oder RealFaviconGenerator.
5. Prüfen: Im Browser-Tab, als Lesezeichen, auf dem Handy-Startbildschirm und mit der URL-Prüfung der Google Search Console.

Favicon im Dunkelmodus

Viele Nutzer haben Browser und Betriebssystem auf dunkel gestellt. Ein schwarzes Logo auf transparentem Grund verschwindet dann im Tab. Ein Icon im SVG-Format kann sich anpassen, weil es CSS enthalten darf:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    path { fill: #1a1a1a; }
    @media (prefers-color-scheme: dark) { path { fill: #ffffff; } }
  </style>
  <path d="M4 4h24v24H4z" />
</svg>

Nicht jeder Browser zeigt SVG-Icons an. Darum bleibt immer eine ICO- oder PNG-Datei als Rückfall eingebunden. Die einfachste Alternative ohne Code ist ein Icon mit eigener, farbiger Hintergrundfläche, das auf hellem und dunklem Grund funktioniert.

Warum Google das Favicon nicht anzeigt

• Das Icon ist nicht quadratisch oder zu klein.
• Die Datei ist per robots.txt gesperrt oder liefert einen Fehler. Google ruft sie mit einem eigenen Crawler ab.
• Der Verweis steht nur auf Unterseiten, nicht auf der Startseite.
• Die Adresse wechselt laufend, etwa mit Versionsnummern im Dateinamen. Google empfiehlt eine feste URL.
• Das Motiv verstösst gegen die Richtlinien, etwa mit anstössigen Inhalten. Dann ersetzt Google es durch ein Standardsymbol.

Nach einer Korrektur dauert es oft einige Tage bis Wochen, bis das neue Symbol in den Suchergebnissen erscheint, weil Google es erst beim nächsten Crawlen der Startseite übernimmt.

Praxis-Bezug für Schweizer KMU

Für ein KMU ist das Favicon ein kleines Detail, das den professionellen Gesamteindruck spürbar beeinflusst. Auf vielen Websites fehlt es, oder es ist nur ein einzelnes, verpixeltes .ico hinterlegt, das auf hochauflösenden Bildschirmen und in der Google-Suche unsauber aussieht. Wer ein einheitliches Icon-Set aus dem eigenen Logo ableitet, sorgt dafür, dass die Marke vom Browser-Tab bis zum Suchergebnis gleich auftritt.