Ein Favicon-Set ist die Sammlung aller Symboldateien, mit denen eine Website in Browsern, Lesezeichen und auf dem Startbildschirm eines Telefons dargestellt wird. Statt einer einzelnen Datei sind es mehrere Größen und Formate, weil jedes System eigene Anforderungen stellt.
- Favicon-Set
Die Gesamtheit der Symboldateien einer Website in allen Größen und Formaten, die Browser und Betriebssysteme dafür anfordern.
Beispiel: „Das Favicon-Set fehlt noch, auf dem iPhone zeigt der Startbildschirm nur einen Screenshot.“Herkunft: Das Kunstwort Favicon setzt sich aus favorite und icon zusammen. Es stammt aus dem Internet Explorer 5, der 1999 als erster Browser ein Symbol neben dem Lesezeichen anzeigte.
Woraus ein Set besteht
Den Kern bildet eine SVG-Datei. Sie skaliert verlustfrei auf jede Größe und wird von allen aktuellen Browsern verstanden. Daneben braucht es weiterhin eine PNG-Fassung als Rückfall sowie ein größeres Symbol für den Startbildschirm eines Telefons, das die Systeme dort als App-Kachel benutzen.
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-96.png" sizes="96x96">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Die Datei favicon.ico im Wurzelverzeichnis gehört ebenfalls dazu. Browser fragen sie auch ohne Verweis im Quelltext ab, und ohne sie erscheint bei jedem Seitenaufruf ein vermeidbarer 404-Fehler in den Serverprotokollen.
Warum eine Datei nicht reicht
Die Anzeigegrößen reichen vom Reiter im Browser mit 16 Pixeln bis zur Kachel auf dem Startbildschirm mit 180 Pixeln und mehr. Ein Motiv, das auf 180 Pixeln funktioniert, ist auf 16 Pixeln oft ein grauer Fleck: Feine Linien verschwinden, Schrift wird unleserlich, mehrfarbige Verläufe verwaschen.
Aus unserer Arbeit heraus lohnt deshalb eine vereinfachte Fassung für die kleinen Größen. Aus einem Logo mit Schriftzug wird das Bildzeichen allein, aus einem Verlauf eine Fläche. Wer das Set aus einer einzigen hochauflösenden Datei generieren lässt, bekommt zwar alle Größen, aber im Reiter eine Fläche, die niemand zuordnen kann.
Dark Mode und Themenfarbe
Eine SVG als Favicon kann auf den Modus des Systems reagieren, weil sie ein eigenes Dokument ist und darin eine Medienabfrage auswerten darf. Ein Symbol, das auf hellem Reiter dunkel und auf dunklem Reiter hell erscheint, bleibt damit in beiden Fällen erkennbar.
Dazu kommt die Themenfarbe über <meta name="theme-color">. Sie färbt auf Mobilgeräten die Leiste oberhalb der Seite ein und gehört zum selben Satz an Angaben, auch wenn sie kein Symbol ist.