Ikonisch

Mit dem Trend zu dreistelligen Tab-Zahlen hat auch eine Spielerei deutlich an Bedeutung gewonnen, und zugleich hält die traditionelle Implementierung von Favicons als kleine PNG-Dateien den Anforderungen hochauflösender Bildschirme und effizienter Bandbreitennutzung nicht mehr stand. Dank der SVG-Unterstützung der meisten modernen Browser ist die Lösung auf den ersten Blick einfach – SVG als erste Wahl, PNG als Rückfalloption:

In diesem Fall schert allerdings Apple aus, dessen Safari-Browser offiziell keine SVG-Favicons unterstützt, faktisch aber schon (unter dem Codenamen Pinned Tab Icons:

Für ein mask-icon gelten besondere Anforderungen: Alle Vektorelemente müssen tiefschwarz auf einem transparenten Hintergrund angelegt sein, während das color-Attribut die gewünschte Farbe reguliert. Für touch-basierte Geräte verlangt Apple dagegen weiterhin PNG-Dateien der Größe 180x180px, die wie folgt referenziert werden müssen:

Google lässt sich natürlich ebenfalls nicht lumpen und erwartet für Android-Geräte die Verlinkung eines web app manifest im JSON-Format –

– dessen Inhalt unter anderem auf Icons referenziert:

{ "icons": [ { "src": "/images/favicon-512.png", "type": "image/png", "sizes": "512x512" } ] }

Es werden also nicht mehr als sechs Dateien benötigt, um ein kleines Icon in der Tableiste eines Browsers darzustellen und unter günstigen Umständen 2,1 KB/60% (32px), 7,1 KB/84% (180px) oder 20,6 KB/94% (512px) Übetragungskapazität einzusparen. Faszinierend, wie moderne Technologie unser aller Leben verbessert.

Während ich die PNG-Versionen meines Favicons – der Buchstabe e in der Farbe #336699 auf transparentem Hintergrund – mit Pixelmator Pro generiere, lassen sich die SVG-Versionen sehr gut mit Inkscape erstellen: Buchstabe platzieren, in einen Pfad umwandeln (Path → Object to Path), als favicon-mask.svg speichern, Pfad einfärben und als favicon.svg speichern. Dank des aggressiven Favicon-Cachings unter iOS/iPadOS wird es allerdings noch einige Zeit dauern, bis ich selbst das neue Favicon auf meinen Mobilgeräten bewundern kann.