Ein Favicon ist das kleine Symbol einer Website, das im Browser-Tab, in Lesezeichen, in der Verlaufsliste und teilweise in Suchergebnissen angezeigt wird. Meist handelt es sich um eine vereinfachte Version des Logos oder ein markantes Bildzeichen. Das Favicon wird als Bilddatei im Stammverzeichnis der Website oder per HTML-Verweis hinterlegt und trägt zur Wiedererkennbarkeit der Marke bei.
Was ist ein Favicon?
Ein Favicon ist das kleine Symbol einer Website, das im Browser-Tab, in Lesezeichen, in der Verlaufsliste und teilweise in Suchergebnissen angezeigt wird. Der Name ist eine Kurzform von „Favorites Icon“, weil das Symbol ursprünglich vor allem in der Favoritenliste — den Lesezeichen — erschien. Meist handelt es sich um eine vereinfachte Version des Logos oder ein markantes Bildzeichen in den Markenfarben, das die Website auf einen Blick wiedererkennbar macht.
Technisch ist das Favicon eine kleine Bilddatei, die entweder unter einem festen Namen im Stammverzeichnis der Website liegt oder per Verweis im HTML-Kopfbereich eingebunden wird. Moderne Websites hinterlegen dabei nicht mehr nur eine einzelne Datei, sondern eine ganze Familie von Symbolen für unterschiedliche Anzeigekontexte. Eine kompakte Einordnung liefern die MDN Web Docs und der Wikipedia-Artikel zum Favicon.
Als visuelles Element gehört das Favicon eng zum Branding einer Website. Es ist oft der kleinste sichtbare Träger der Markenidentität und trägt an vielen Kontaktpunkten still zur Markenbekanntheit bei — im Tab, im Lesezeichen, auf dem Startbildschirm. Weil es an so vielen Stellen erscheint, sollte es aus demselben Gestaltungsraster stammen wie Logo und Farbwelt und nicht als nachträglicher Gedanke behandelt werden.
Wie funktioniert ein Favicon?
Der Browser sucht beim Laden einer Website automatisch nach einer Favicon-Datei — klassisch unter dem Namen favicon.ico im Stammverzeichnis — oder folgt einem expliziten Verweis im HTML-Kopfbereich. Moderne Websites hinterlegen mehrere Größen und Formate: PNG oder SVG für Browser-Tabs, größere Varianten für Lesezeichen auf Smartphone-Startbildschirmen und Kacheln in Betriebssystemen. So kann jedes Gerät die jeweils passende Auflösung wählen, statt ein winziges Symbol unscharf hochzuskalieren.
Content-Management-Systeme machen die Einrichtung einfach: In WordPress lässt sich das „Website-Icon“ direkt in den Einstellungen hochladen, das System erzeugt die benötigten Größen automatisch. Wichtig ist eine quadratische Ausgangsdatei in ausreichender Auflösung, damit alle abgeleiteten Größen sauber aussehen — von der winzigen Tab-Darstellung bis zum großen Touch-Icon auf dem Homescreen. Wer die Symbole manuell einbindet, sollte darauf achten, dass die Pfade dauerhaft erreichbar bleiben, weil Browser sie sonst nicht laden können.
Bindet man das Apple-Touch-Icon korrekt ein, kann ein Nutzer die Website über „Zum Home-Bildschirm hinzufügen“ wie eine App ablegen; das Favicon wird dann zum App-Symbol. Damit rückt das kleine Bild in unmittelbare Nähe echter Anwendungen und sollte auch in dieser größeren Darstellung überzeugen. Das unterstreicht, warum die Ausgangsdatei hochauflösend sein muss: Dasselbe Motiv wird sowohl winzig im Tab als auch groß auf dem Startbildschirm ausgespielt.
Warum ist ein Favicon wichtig?
Das Favicon ist ein kleines, aber wirksames Wiedererkennungsmerkmal. Wer viele Tabs geöffnet hat, findet eine Seite über ihr Symbol schneller wieder; in Lesezeichenlisten und auf dem Smartphone-Startbildschirm ersetzt es faktisch das Logo. Eine Website ohne Favicon zeigt ein generisches Platzhaltersymbol — das wirkt schnell unfertig und schwächt die Marke, gerade im Vergleich mit einem durchdachten Corporate Design, das sonst überall konsequent umgesetzt ist.
Auch in der Google-Suche spielt das Favicon eine Rolle. In den mobilen und zunehmend auch in den Desktop-Suchergebnissen wird es neben dem Seitennamen angezeigt; Google beschreibt die Anforderungen in einem eigenen Hilfeartikel. Ein klar erkennbares Symbol kann dort die Aufmerksamkeit und damit die Klickrate positiv beeinflussen — für eine Kanzlei, deren Ergebnisse zwischen vielen ähnlichen Einträgen im SERP stehen, ist das ein kleiner, aber realer Vorteil im Kampf um die Aufmerksamkeit der Suchenden.
Nicht zuletzt trägt das Favicon zur wahrgenommenen Qualität einer Seite bei. Es ist ein Detail, das die meisten Nutzer nicht bewusst registrieren, dessen Fehlen aber unterschwellig auffällt und die User Experience mindert. Eine sorgfältig gestaltete Seite, die bis in solche Kleinigkeiten stimmig ist, wirkt vertrauenswürdiger — gerade in beratungsintensiven Branchen, in denen Vertrauen die Grundlage der Kundenbeziehung ist.
Favicon in der Praxis
Ein gutes Favicon ist radikal reduziert: Bei 16 mal 16 Pixeln im Browser-Tab überleben keine Details, keine Schriftzüge und keine feinen Linien. Bewährt haben sich Initialen, ein einzelnes Bildzeichen oder eine markante Form in den Markenfarben, wie sie auch die Praxis-Übersicht im Ryte-Wiki empfiehlt. Der Test ist einfach — das Symbol in Originalgröße neben anderen Tabs betrachten und prüfen, ob es auch dann noch eindeutig erkennbar bleibt, wenn ein Dutzend Tabs geöffnet sind.
Technisch empfiehlt sich heute eine Kombination aus einer klassischen ICO- oder PNG-Datei und einer skalierbaren SVG-Variante, ergänzt um ein Apple-Touch-Icon für iOS-Geräte. Weil moderne Websites ohnehin dem Responsive Design folgen, gehört das mehrformatige Favicon zum Standardrepertoire jeder professionellen Umsetzung. Nach dem Austausch eines Favicons kann es dauern, bis Browser und Google das neue Symbol anzeigen — beide cachen Favicons besonders hartnäckig, was bei Relaunches gern für Verwirrung sorgt.
Häufige Fehler beim Favicon
Der häufigste Fehler ist ein zu detailliertes Motiv: Was in großer Ansicht funktioniert, wird bei 16 Pixeln zu einem unkenntlichen Fleck. Ebenso verbreitet ist das komplette Fehlen eines Favicons oder eine nicht-quadratische Ausgangsdatei, die verzerrt dargestellt wird. Auch ein Symbol ohne ausreichenden Kontrast geht im hellen wie im dunklen Browser-Theme unter, weil moderne Browser die Tableiste je nach Systemeinstellung unterschiedlich einfärben.
Ein technischer Klassiker ist der Cache: Wird ein Favicon getauscht, zeigen Browser und Suchmaschine oft noch das alte Symbol, was zu Verwirrung führt. Hier hilft Geduld — und im Zweifel das Erzwingen eines Neuladens. Für die Suche verlangt Google zudem, dass die Favicon-Datei über einen dauerhaft erreichbaren Pfad eingebunden ist und regelmäßig gecrawlt werden kann, damit das Symbol im Ranking neben dem Treffer erscheint. Fehlt der Verweis oder ändert sich der Pfad ständig, zeigt Google im Zweifel gar kein Symbol an.