Favicons und das Web-App-Manifest: welche Dateien ausgeliefert werden müssen und wie sie deklariert werden

Worum es geht

Der HTML Standard besagt, dass ein User Agent in Abwesenheit eines link mit dem Schlüsselwort icon /favicon.ico relativ zur URL des Dokuments abrufen und als Icon verwenden darf. Deshalb erscheint eine Anfrage für diesen Pfad in jedem Zugriffslog, und deshalb sollte die Datei auch dann existieren, wenn Icons deklariert sind. Deklarierte Icons sehen so aus: <link rel="icon" href="..." sizes="..." type="...">; sind mehrere deklariert, muss der User Agent laut Standard das am besten passende anhand der Attribute type, media und sizes auswählen, und unter gleich passenden gewinnt das zuletzt deklarierte. Installierte und angeheftete Kontexte lesen das Web-App-Manifest, dessen icons-Array Objekte mit src, sizes (48x48 96x96) und purpose auflistet. MDN dokumentiert die purpose-Werte: any (Standard), maskable (mit Icon-Masken und einer Sicherheitszone gestaltet, damit die Plattform die Ränder beschneiden darf) und monochrome (der Alphakanal als Maske über einer einheitlichen Füllung verwendet). Für Suchergebnisse hält Googles Dokumentation fest, dass sie ein Favicon pro Site unterstützt, wobei eine Site ein Hostname ist, dass das Icon quadratisch und mindestens 8x8px sein muss, wobei mehr als 48x48px empfohlen wird, dass die Favicon-URL stabil sein muss, und dass sowohl die Icon-Datei als auch die Startseite crawlbar sein müssen.

Warum es wichtig ist

Icons sind klein, tauchen aber überall auf: Tabs, Lesezeichen, Startbildschirme, Suchergebnisse, Fensterwechsler. Ein fehlendes oder falsches Icon fällt Nutzenden auf und kostet nichts, es einmalig zu beheben, während eine defekte Deklaration jahrelang bestehen kann, weil nichts fehlschlägt.

So wird es angewendet

• /favicon.ico (eine ICO-Datei mit mehreren Grössen) ausliefern, ein SVG-Icon mit rel="icon" type="image/svg+xml" deklarieren, ein PNG für Browser ohne SVG-Icon-Unterstützung, sowie ein apple-touch-icon-PNG in der von Apples Dokumentation angegebenen Grösse.
• Ein Manifest mit mindestens zwei PNG-Grössen ergänzen (ein Launcher-Icon und ein grosses für Splash-Screens) in den Grössen, die die Zielplattformen dokumentieren; ein separates maskable-Icon mit der Grafik innerhalb der Sicherheitszone angeben, statt das any-Icon wiederzuverwenden.
• Das Manifest mit dem korrekten Medientyp ausliefern und es mit <link rel="manifest"> auf jeder Seite deklarieren, nicht nur auf der Startseite.
• Icon-URLs stabil halten; ändert sich die Grafik, den Pfad beibehalten und Caches ablaufen lassen, oder den Pfad überall gleichzeitig ändern.
• Mit dem Anwendungs-Panel des Browsers sowie durch Abrufen jeder deklarierten URL mit curl prüfen.

Stolpersteine

Icons zu deklarieren, die 404 oder eine Weiterleitung auf HTML zurückgeben. Ein maskable-Icon zu verwenden, dessen Logo die Ränder berührt, die Plattformen beschneiden. /favicon.ico oder das Manifest in robots.txt zu sperren.