site.webmanifest: So arbeitet sie mit Favicons

Warum Browser mehrere Icon-Dateien brauchen und welche Aufgabe sie erfüllen

---

---

---

Wenn Du für Deine Webseite ein vollständiges Favicon-Paket erstellst, stößt Du früher oder später auf eine Datei namens site.webmanifest. Auf den ersten Blick wirkt sie wie eine weitere Favicon-Datei, tatsächlich übernimmt sie aber eine andere Aufgabe. Sie beschreibt gegenüber dem Browser, wie Deine Webseite dargestellt werden soll, wenn sie auf einem Gerät ähnlich wie eine App installiert oder zum Startbildschirm hinzugefügt wird.

Die site.webmanifest ist mehr als eine Icon-Liste

Bei der site.webmanifest handelt es sich um eine Textdatei im Json-Format. Sie kann den Namen und Kurznamen einer Webseite, die Startadresse, die bevorzugte Darstellungsform, verschiedene Farben und mehrere Symboldateien enthalten. Der Dateiname site.webmanifest ist dabei eine verbreitete Konvention, aber keine zwingende Vorgabe. Entscheidend ist, dass die Datei korrekt im Kopfbereich der Webseite eingebunden wird.

Das geschieht über den folgenden Eintrag:



Der Browser erkennt dadurch, wo sich das Manifest befindet. Ohne diese Verknüpfung wird die Datei nicht automatisch genutzt, nur weil sie im Hauptverzeichnis der Webseite liegt.

Favicons und Manifest-Icons erfüllen unterschiedliche Aufgaben

Das klassische favicon erscheint vor allem im Browsertab, in Lesezeichen, im Verlauf und teilweise in Suchergebnissen. Dafür werden die entsprechenden Dateien direkt im Html-Dokument referenziert. Ein typischer Aufbau kann beispielsweise so aussehen:



Die site.webmanifest ersetzt diese Angaben nicht. Sie ergänzt sie um Icons, die insbesondere für installierte Webanwendungen, Startbildschirm-Verknüpfungen, App-Übersichten oder systemseitige Darstellungen verwendet werden können. Welches Symbol ein Browser letztlich auswählt, hängt vom Gerät, Betriebssystem, Browser und jeweiligen Einsatzbereich ab.

So werden Icons in der site.webmanifest definiert

Innerhalb des Manifests befindet sich üblicherweise ein Bereich namens icons. Dort kannst Du mehrere Bilddateien mit ihren Abmessungen und Dateitypen angeben. Ein einfaches Beispiel sieht folgendermaßen aus:



Mit src wird der Pfad zur Grafik festgelegt. sizes beschreibt deren tatsächliche Abmessungen und type gibt das Bildformat an. Der Browser kann anhand dieser Informationen das passende Icon für den vorgesehenen Anwendungsfall auswählen.

Warum mehrere Favicon-Dateien sinnvoll bleiben

Eine einzelne Grafik kann technisch für mehrere Bereiche verwendet werden, liefert aber nicht überall das beste Ergebnis. Im kleinen Browsertab muss ein favicon schon bei 16 oder 32 Pixeln klar erkennbar sein. Ein Icon auf dem Startbildschirm wird dagegen wesentlich größer dargestellt und benötigt entsprechend mehr Details sowie eine höhere Auflösung.

Die ICO-Datei dient vor allem als robuste Lösung für klassische Browser und ältere Systeme. Ein SVG-Favicon lässt sich verlustfrei skalieren und eignet sich gut für moderne Browser. PNG-Dateien in größeren Abmessungen werden dagegen häufig für mobile Startbildschirme und installierte Webanwendungen eingesetzt. Das apple-touch-icon ist speziell für die Darstellung auf Apple-Geräten gedacht und wird unabhängig von den Icons in der site.webmanifest eingebunden.

Ein vollständiges Paket kann deshalb aus favicon.ico, favicon.svg, apple-touch-icon.png sowie PNG-Dateien mit 192 mal 192 und 512 mal 512 Pixeln bestehen. Nicht jede Webseite benötigt zwingend sämtliche Varianten. Wenn Du eine möglichst konsistente Darstellung auf unterschiedlichen Plattformen erreichen möchtest, ist diese Aufteilung allerdings sinnvoll.

Maskierbare Icons verhindern unerwünschte Zuschnitte

Einige Betriebssysteme schneiden App-Symbole automatisch in eine bestimmte Form, beispielsweise als Kreis oder abgerundetes Quadrat. Liegt das Motiv zu nah am Rand, können dabei wichtige Bestandteile verloren gehen. Für diesen Zweck unterstützt das Manifest sogenannte maskierbare Icons.



Bei einer solchen Grafik sollte das zentrale Motiv ausreichend Abstand zu den Außenkanten besitzen. Der Hintergrund muss zugleich so gestaltet sein, dass er auch nach einem automatischen Zuschnitt sauber aussieht. Alternativ kann ein Icon mit der Angabe "any maskable" für beide Verwendungsarten freigegeben werden, sofern das Design dafür geeignet ist.

Theme Color und Background Color bestimmen das Umfeld

Neben den Grafiken enthält die site.webmanifest häufig die Werte theme_color und background_color. Die Theme-Farbe kann vom Browser oder Betriebssystem für Teile der Benutzeroberfläche verwendet werden. Die Hintergrundfarbe spielt unter anderem beim Start einer installierten Webanwendung eine Rolle, bevor deren eigentlicher Inhalt vollständig geladen ist.

Diese Angaben verändern das klassische favicon im Browsertab nicht. Sie sorgen vielmehr dafür, dass die installierte Variante einer Webseite optisch geschlossener wirkt. Für Spielemagazin.de könnte beispielsweise das dunkle Blau des Seitenkopfes als theme_color dienen, während für den Ladehintergrund eine helle oder passend abgestimmte Farbe verwendet wird.

Änderungen werden nicht immer sofort sichtbar

Favicons und Manifest-Daten werden von Browsern oft hartnäckig zwischengespeichert. Wenn Du eine Datei ersetzt, kann deshalb weiterhin die alte Version erscheinen. Das gilt sowohl für den Browsertab als auch für bereits angelegte Startbildschirm-Verknüpfungen. Ein einfaches Neuladen der Seite reicht dann nicht immer aus.

Du solltest zunächst prüfen, ob alle in der site.webmanifest angegebenen Dateien unter ihren jeweiligen Adressen erreichbar sind. Anschließend kann es helfen, den Browsercache zu leeren, die Seite in einem privaten Fenster aufzurufen oder eine vorhandene Startbildschirm-Verknüpfung zu entfernen und neu anzulegen. Bei größeren Änderungen lassen sich außerdem neue Dateinamen oder Versionsparameter verwenden, damit der Browser die aktualisierten Grafiken sicher abruft.

Erst das Zusammenspiel sorgt für ein vollständiges Icon-Set

Die Rollenverteilung ist letztlich recht klar: Die direkt im Html eingebundenen Favicon-Dateien versorgen Browsertabs, Lesezeichen und ähnliche Bereiche mit einem Symbol. Die site.webmanifest beschreibt dagegen die installierbare beziehungsweise appähnliche Darstellung der Webseite und stellt dafür größere Icons sowie zusätzliche Informationen bereit.

Für eine normale Webseite ist die site.webmanifest nicht zwingend erforderlich. Sobald Du aber Wert auf eine saubere Darstellung auf mobilen Startbildschirmen, in Installationsdialogen oder als Progressive Web App legst, wird sie zu einem wichtigen Bestandteil. Ein gutes Favicon-Konzept besteht daher nicht aus einer einzigen Datei, sondern aus mehreren gezielt vorbereiteten Grafiken, die gemeinsam ein einheitliches Erscheinungsbild schaffen.