Zwölf Tabs offen, und Du findest den richtigen blind: am winzigen Bild davor, nicht am Text. Genau das leistet ein Favicon. Das kleine quadratische Symbol links neben dem Seitentitel ist der unscheinbarste Teil Deines Markenauftritts und zugleich der mit der höchsten Wiederholungsrate, weil es in jedem Tab, jedem Lesezeichen und auf jedem Startbildschirm erscheint.
Viele Webseiten lassen diesen Platz leer und verschenken damit einen täglichen Markenkontakt. Dabei kostet ein eigenes Favicon kaum Aufwand, und der Effekt begleitet jeden Besucher durch seinen Browser-Alltag.
Was ist ein Favicon überhaupt?
Ein Favicon (Kurzform für „Favourite Icon") ist ein kleines quadratisches Bild, das eine Webseite visuell repräsentiert. Seine Hauptaufgabe: Deine Seite in der Browser- und Betriebssystemumgebung schnell wiedererkennbar machen.
Der Browser lädt dieses Bild automatisch und zeigt es an allen vorgesehenen Stellen an. Welche Domainendung Du gewählt hast, prägt das Markenbild im Tab gleich mit: Favicon und Endung stehen direkt nebeneinander und wirken zusammen.
Wo Dein Favicon überall auftaucht
Das Favicon erscheint nicht nur an einer einzigen Stelle. Sein Auftritt wechselt je nach Kontext und Plattform:
- Browser-Tabs: Der häufigste und sichtbarste Ort. Bei vielen geöffneten Tabs hilft das Favicon, Deine Seite in Sekundenbruchteilen zu finden. Fehlt es, zeigt der Browser ein graues Standardsymbol.
- Lesezeichen: Erscheint neben dem Namen und verbessert die Wiedererkennung in langen Listen erheblich.
- Browser-Verlauf: Dient in der Chronik als visueller Ankerpunkt, der das Auffinden besuchter Seiten erleichtert.
- Startbildschirm: Beim „Zum Startbildschirm hinzufügen" wird das Favicon zum App-Icon und steht gleichberechtigt neben den Symbolen nativer Apps.
- Suchergebnisse: Auf dem Smartphone zeigt Google das Favicon direkt neben dem Seitentitel in der Trefferliste.
In Social-Media-Vorschauen taucht das Favicon nur als Notlösung auf. Pflege dort ein eigenes Vorschaubild, denn auf das Favicon ist im Social-Preview kein Verlass.
Was ein gutes Favicon für die Marke leistet
Ein sorgfältig gestaltetes Favicon ist die Miniaturversion Deines Logos. Durch die ständige Sichtbarkeit in Tabs, Lesezeichen und auf Startbildschirmen festigt es Deine Marke im Hinterkopf des Besuchers, ohne dass er es bewusst registriert. In gesättigten Märkten machen genau solche Details den Unterschied. Das Favicon greift dabei die Grundlagen Deines Logos und Brandings auf und trägt sie als kleinstes Markenzeichen durch den ganzen Browser.
Es wirkt auch auf das Vertrauen. Eine Seite ohne Favicon sieht unfertig aus, das graue Standardsymbol signalisiert Nachlässigkeit. Ein eigenes Icon zeigt Aufmerksamkeit fürs Detail und unterstreicht die Seriosität Deines Auftritts.
Was es im Nutzeralltag bringt
Im Alltag der Besucher senkt das Favicon die Mühe beim Springen zwischen vielen Tabs: Das Auge findet die richtige Seite sofort. Über den Startbildschirm wird Dein Icon zum direkten Tor zurück auf die Seite und stärkt die Rückkehrrate.
Ein Rankingfaktor ist das Favicon nicht, aber es stützt die Orientierung der Nutzer, und solche UX-Signale honorieren Suchmaschinen mittelbar.
Welches Format heute?
Die alte Faustregel „nimm eine .ico-Datei" stammt aus der Zeit des Internet Explorer. Heute zeigen alle aktuellen Browser ein modernes Vektor-Favicon an, und jedes Format hat eine klare Rolle:
- SVG: Deine Basis. Ein Vektor-Favicon bleibt in jeder Größe gestochen scharf, von 16 Pixeln im Tab bis zur App-Kachel, und die Datei wiegt oft nur wenige Kilobyte. Chrome, Firefox und Edge zeigen es an.
- PNG in 32×32: Dein Fallback. Safari rendert Vektor-Favicons noch nicht überall, hier springt ein scharfes Pixelbild ein. Eine zweite Größe in 180×180 dient als Icon für den iPhone-Startbildschirm.
- ICO: Nur noch für sehr alte Browser. Eine einzige Datei in 32×32 reicht als Sicherheitsnetz.
Knapp zusammengefasst: SVG als Hauptformat, ein PNG-Fallback für Safari und das iPhone, eine ICO im Hintergrund. Damit ist jeder Browser bedient, ohne dass Du ein Dutzend Bildgrößen pflegst.
So kommst Du praktisch dran
Der Weg zum eigenen Favicon ist kürzer, als viele denken. Drei Schritte genügen, und am technischen Detail musst Du Dich nicht aufhalten.
Zuerst brauchst Du eine Vorlage: Dein Logo oder ein markantes Element daraus, quadratisch zugeschnitten und bewusst schlicht. Im Mini-Format von 16 Pixeln verschwinden feine Linien und Schriftzüge. Eine kräftige Form oder ein einzelner Buchstabe wirken deutlich besser als das komplette Logo.
Aus dieser einen Vorlage erzeugt ein Favicon-Generator alle nötigen Größen und Varianten auf einmal. Werkzeuge wie realfavicongenerator.net nehmen Deine Datei, liefern das fertige Paket zum Download und sagen Dir auch, wie es eingebunden gehört.
Den letzten Schritt übernimmt Dein System: Viele Content-Management-Systeme haben in den Theme- oder Design-Einstellungen ein eigenes Feld zum Hochladen des Favicons. Findest Du es nicht, ist das der ideale kurze Auftrag an Deine Agentur. Sie hinterlegt das Icon-Paket einmal sauber, und danach ist es erledigt.
Hell und Dunkel im Sichttest
Ein dunkles Logo, das im hellen Tab gut aussieht, verschwindet im dunklen Browserdesign fast vollständig. Achte deshalb auf eine kontrastreiche Grundfarbe, die auf hellem wie dunklem Grund lesbar bleibt. Für die meisten Logos genügt das schon; nur in Ausnahmefällen lohnt eine zweite Variante speziell für den Dunkelmodus.
Nach dem Einbinden kommt der Test. Öffne Deine Seite in Chrome, Firefox, Safari und Edge sowie auf einem Smartphone und schalte dort einmal in den Dunkelmodus. Dieser Sichttest dauert keine fünf Minuten und gehört in den Grundcheck Deiner Webseite, besonders nach einem Logo-Wechsel oder Rebranding.
Greife beim Design Deine Markenfarben auf und nimm die Formen Deiner passenden Schriftarten mit, damit das Favicon zum Gesamtbild passt.
Fazit — kleines Symbol mit großer Wirkung
Das Favicon mag winzig sein, seine Wirkung auf Wahrnehmung und Marke ist es nicht. Es stärkt die Wiedererkennung, schärft den Eindruck Deiner Seite, erleichtert die Orientierung und verankert Deine Marke auf dem Startbildschirm.
Der Aufwand bleibt gering, der Mehrwert ist deutlich. Bereite ein schlichtes quadratisches Icon vor, lass es ein Generator-Paket erzeugen und hinterlege es einmal im System oder per Agentur. Danach trägt Dein Favicon das Erkennungszeichen Deiner Webseite durch jeden Browser-Tag.