Favicon als Symbol im Browsertab
Warum es mehr ist als Kosmetik
Wer zwanzig Tabs offen hat, sieht vom Titel einer Seite drei Zeichen. Erkennbar bleibt nur das Symbol. Fehlt es, zeigt der Browser eine leere Fläche oder ein Standardzeichen, und die Seite ist zwischen den anderen nicht wiederzufinden. Beim Ablegen auf dem Startbildschirm eines Telefons gilt dasselbe in größer.
Welche Dateien heute nötig sind
Ein einzelnes Bild reicht nicht mehr, weil verschiedene Systeme verschiedene Größen und Formate abrufen. In der Praxis bewährt hat sich ein kleines Set, das alle üblichen Fälle abdeckt und danach jahrelang unangetastet bleibt.
- favicon.ico mit mehreren Auflösungen für ältere Browser
- Ein Symbol mit 180 Pixeln Kantenlänge für Apple-Geräte
- Zwei Fassungen mit 192 und 512 Pixeln für Android und die Ablage auf dem Startbildschirm
- Eine Manifestdatei, die diese Symbole zusammen mit dem Namen der Website benennt
Gestaltung im Kleinen
Ein vollständiges Logo funktioniert bei sechzehn Pixeln Kantenlänge nie. Was dort noch lesbar bleibt, ist eine stark reduzierte Bildmarke oder ein einzelner Buchstabe. Deshalb gehört ein solches Zeichen bereits in die Entwicklung eines Erscheinungsbildes und wird nicht nachträglich aus einer vorhandenen Datei zusammengeschnitten.
Zwei praktische Punkte: Das Symbol sollte auf hellen und auf dunklen Tableisten funktionieren, und es braucht ausreichend Rand, sonst wird es auf Telefonen beschnitten, wenn das System eine runde Form daraus macht.
Ein Beispiel aus der Praxis
Nach einem Relaunch zeigte der Browser wochenlang noch das alte Symbol, obwohl die Datei ausgetauscht war. Ursache war der Zwischenspeicher, der Favicons besonders lange behält. Ein Dateiname mit Versionsangabe oder ein Neuladen unter Umgehung des Zwischenspeichers löst das. Wer das nicht weiß, sucht den Fehler an der falschen Stelle.
Häufige Fragen zu Favicon
Reicht ein PNG?
Für die meisten modernen Browser ja. Die ico-Datei kostet aber kaum Aufwand und deckt ältere Fälle mit ab.
Passend dazu bei NETZTIME
Wie wir mit diesem Thema in Projekten umgehen, steht bei unser Webdesign aus Bonn.