Favicon
Was ist ein Favicon?
Ein Favicon ist das kleine Symbol einer Website, das Browser in Tabs, Lesezeichen und teilweise in Suchergebnissen anzeigen. Es dient der schnellen Wiedererkennung einer Domain. Die Bilddatei wird im HTML-Code oder über einen Standardpfad eingebunden und liegt meist im Format ICO, PNG oder SVG vor.
Das Favicon, deutsch: Website-Symbol, ergänzt den Seitentitel um ein kompaktes visuelles Erkennungsmerkmal. Der Begriff setzt sich aus den englischen Wörtern „favorite“ und „icon“ zusammen. Ursprünglich kennzeichnete das Symbol gespeicherte Favoriten, heute erscheint es je nach Browser und Gerät auch in Tabs, im Browserverlauf, auf Startbildschirmen und neben Suchergebnissen.
Wie funktioniert ein Favicon?
Ein Browser sucht die Bilddatei anhand einer Angabe im <head> des HTML-Dokuments. Eine typische Einbindung lautet <link rel='icon' href='/favicon.svg' type='image/svg+xml'>. Das Attribut rel='icon' beschreibt den Zweck der Datei, während href ihren Speicherort angibt. Fehlt die Angabe, rufen manche Browser ersatzweise die Datei /favicon.ico im Stammverzeichnis der Domain ab.
Mehrere Varianten lassen sich parallel hinterlegen, etwa eine SVG-Datei für moderne Browser und eine ICO-Datei als zusätzliche Kompatibilitätslösung. Entscheidend ist, dass jede angegebene URL erreichbar bleibt und den korrekten Dateityp ausliefert. Bei einer Weiterleitung oder einem Serverfehler kann der Browser auf eine andere Variante zurückgreifen oder kein Symbol anzeigen.
Formate und Größen im Vergleich
ICO, PNG und SVG erfüllen unterschiedliche Anforderungen. Eine ICO-Datei kann mehrere Bildgrößen in einer Datei enthalten. PNG unterstützt Transparenz und wird von verbreiteten Browsern zuverlässig dargestellt. SVG bleibt bei verschiedenen Auflösungen scharf, eignet sich aber nur für Motive, die auch stark verkleinert verständlich bleiben.
| Format | Eigenschaften | Geeigneter Einsatz |
|---|---|---|
| ICO | Kann mehrere Pixelgrößen enthalten und bietet eine hohe Browserkompatibilität. | Kompatibilitätslösung und Datei im Stammverzeichnis |
| PNG | Unterstützt Transparenz und besitzt eine feste Pixelgröße. | Browser, Suchergebnisse und Content-Management-Systeme |
| SVG | Ist skalierbar und bleibt auf hochauflösenden Displays scharf. | Moderne Browser und einfache Vektormotive |
Für Google muss das Symbol quadratisch sein und mindestens 8 mal 8 Pixel messen. Eine Ausgangsdatei mit 48 mal 48 Pixeln oder mehr bietet ausreichend Reserven für verschiedene Darstellungen. Sehr feine Linien, lange Schriftzüge und kleine Texte verlieren beim Herunterskalieren ihre Erkennbarkeit. Prüfe das Motiv deshalb auch in einer Vorschau von 16 mal 16 Pixeln.
Favicon und SEO
Ein Favicon ist kein eigenständiger Ranking-Faktor. Das Hinzufügen oder Austauschen der Datei verbessert daher nicht automatisch die organische Position einer Seite. In mobilen Google-Suchergebnissen kann das Symbol jedoch neben dem Treffer erscheinen. Ein deutlich erkennbares Markensymbol erleichtert dort die Zuordnung eines Ergebnisses und kann das Vertrauen in das Snippet unterstützen.
Google verwendet grundsätzlich ein Symbol pro Hostname. Die Hauptdomain und eine Subdomain können deshalb unterschiedliche Dateien besitzen. Die angegebene Bild-URL muss für den Googlebot crawlbar sein und sollte dauerhaft bestehen bleiben. Blockiert die robots.txt den Dateipfad oder liefert der Server einen Fehlerstatus, kann Google das Symbol nicht zuverlässig abrufen.
Die Wirkung auf die Klickrate lässt sich nicht isoliert berechnen, weil Position, Suchintention, Seitentitel, Beschreibung und Markenbekanntheit gleichzeitig auf den Klick einwirken. Vergleiche Änderungen deshalb nur bei ähnlichen Rankings und über einen ausreichenden Zeitraum. Eine strukturierte Onpage-Optimierung betrachtet das Symbol gemeinsam mit Snippets, interner Verlinkung und technischen Signalen.
Unterschied zwischen Favicon und Logo
Der Unterschied zwischen Favicon und Logo liegt im Einsatzzweck und in der verfügbaren Fläche. Ein Logo kann einen Firmennamen, einen Zusatz und komplexe Formen enthalten. Das kleine Browsersymbol muss dagegen bei wenigen Pixeln eindeutig bleiben. Viele Unternehmen verwenden deshalb nur ein Signet, einen Buchstaben oder eine stark vereinfachte Form ihres Logos.
Ein Apple-Touch-Icon ist ebenfalls kein gewöhnliches Browsersymbol. Mobilgeräte verwenden diese separate Grafik unter anderem für Verknüpfungen auf dem Startbildschirm. Für eine konsistente Darstellung sollten Logo, Browsersymbol und App-Symbol dieselbe Markenidee verwenden, aber jeweils für ihre konkrete Darstellungsgröße gestaltet sein.
Favicon richtig einbinden
Die technische Umsetzung beginnt mit einer quadratischen Ausgangsgrafik. Das Motiv braucht klare Konturen, ausreichenden Kontrast und einen ruhigen Rand. Anschließend wird die Datei komprimiert, unter einer stabilen URL gespeichert und im HTML-Kopf verknüpft. Bei einem Website-Relaunch muss der Dateipfad ausdrücklich geprüft werden, weil Änderungen an Verzeichnissen oder Domains alte Verknüpfungen ungültig machen können.
Warum Änderungen verzögert erscheinen
Ein ausgetauschtes Favicon erscheint häufig nicht unmittelbar. Browser speichern die Datei teilweise hartnäckig im Cache, während Google die neue Version erst nach einem erneuten Crawling verarbeitet. Ein privates Browserfenster oder ein Test auf einem zweiten Gerät hilft bei der lokalen Kontrolle. Für Suchergebnisse lässt sich kein genauer Aktualisierungszeitpunkt festlegen.
Typische Fehler beim Favicon
Zu viele Details sind der häufigste Gestaltungsfehler. Ein vollständiges Wortlogo kann in einer großen Grafik sauber aussehen, bei 16 Pixeln jedoch zu einer unlesbaren Fläche werden. Häufig treten außerdem widersprüchliche HTML-Angaben, falsche Dateitypen, gesperrte Pfade und transparente Motive ohne ausreichenden Kontrast auf.
Eine technische Prüfung sollte den Quellcode, die Bild-URL, den HTTP-Status und die Crawlbarkeit gemeinsam kontrollieren. Der kostenlose SEO-Check hilft zusätzlich dabei, weitere technische und inhaltliche Fehler einer Website zu erkennen.
Häufige Fragen zum Favicon
Wo wird ein Favicon angezeigt?
Browser zeigen das Symbol typischerweise in Tabs, Lesezeichen und im Browserverlauf an. Je nach Gerät kann es außerdem auf dem Startbildschirm oder neben einem Google-Suchergebnis erscheinen.
Welche Größe sollte ein Favicon haben?
Die Grafik sollte quadratisch sein. Für verschiedene Einsatzorte ist eine Ausgangsdatei mit mindestens 48 mal 48 Pixeln sinnvoll, während Browser häufig deutlich kleinere Darstellungen erzeugen.
Welches Dateiformat eignet sich für ein Favicon?
ICO bietet eine breite Kompatibilität, PNG unterstützt Transparenz und SVG ist frei skalierbar. Für viele Websites eignet sich eine Kombination aus SVG oder PNG und einer zusätzlichen ICO-Datei.
Warum wird mein neues Favicon nicht angezeigt?
Browser können die alte Datei im Cache gespeichert haben. Weitere mögliche Ursachen sind ein falscher Dateipfad, ein Serverfehler, widersprüchliche HTML-Angaben oder eine noch ausstehende erneute Verarbeitung durch Google.
Ist ein Favicon für SEO erforderlich?
Das Symbol ist kein direkter Ranking-Faktor. Ein erkennbares Symbol kann Suchergebnisse jedoch visuell einer Marke zuordnen und dadurch die Orientierung des Nutzers unterstützen.
Kann jede Unterseite ein eigenes Favicon haben?
Browser können unterschiedliche Symbole pro Seite verarbeiten, wenn die HTML-Angaben voneinander abweichen. Für eine konsistente Marke sollte innerhalb einer Website jedoch dieselbe Variante verwendet werden. Google ordnet grundsätzlich ein Symbol pro Hostname zu.
Wenn du das Symbol im Rahmen eines Relaunchs oder einer technischen Optimierung prüfen lassen möchtest, bietet ein kostenloser Potenzialcheck eine unverbindliche Einordnung deiner Website.
Kostenlosen Potenzialcheck anfragen
Sie haben noch Fragen?
