Favicon als SVG, und wieviel Code man wirklich braucht

Man kann mittlerweile Vektorgrafiken für das Favicon einer Webseite benutzen. Dabei lässt sich direkt das Bild für den Dunkelmodus umfärben. Das ist eine gute Gelegenheit um die Anzahl der Favicons und der Zusatzanweisungen zu reduzieren – brauchte man vor einer Weile für verschiedene Betriebssysteme und Browser nämlich noch einiges an Code, reicht mittlerweile weniger.

Hier im Blog ist das jetzt umgesetzt. Ich bin dabei in etwa diesem Artikel von evilmartians gefolgt. Anlassgeber war übrigens Benedikts Antwort auf meinen Kommentar zu seinem neuen Favicon.

Update 06.01.2024: Das hier verwendete SVG-Favicon wurde später nochmal überarbeitet. Zum einen wegen des Motivs, aber es stellte sich auch heraus, dass ein SVG als kleines Browsertabicon schnell unscharf werden kann wenn es beispielsweise zu feine Linien hat. Es empfiehlt sich daher wohl, das Icon als 32x32-Icon zu entwerfen und Details höchstens so anzubringen, dass sie herunterskaliert nicht auffallen. Diese Details der SVG-Skalierung sind in jedem Fall eine weitere Hürde für SVG-Favicons. Die Artikelkommentare erklären etwas mehr.

Die Ausgangssituation

Hier im Blog war der Code für die Favicons relativ minimal. Es gab nur diese zwei Anweisungen:

<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.png" />

Zusätzlich lag unter favicon.ico das favicon.png nochmal. Das vermeidete 404-Fehler in Browsern, die (damals?) das .ico immer auch abriefen. Dass es eine PNG-Grafik war, war trotz der Dateiendung irrelevant.

Dabei war das apple-touch-icon.png 192x192 px groß und vll etwas unscharf, das favicon.png 16x16. Beide sind hier zu sehen:

Warum unscharf, und wo kommt das Icon überhaupt her?
Ich habe es vor vielen Jahren Pixel für Pixel selbst gebaut, aber als 16x16-Icon, um in meinem IceWM-Desktop ein hübscheres Icon für Thunderbird zu haben. Als ich dann für diesen Blog ein Icon brauchte nutzte ich es einfach wieder. Immerhin war die Ähnlichkeit zum Thunderbirdlogo klein genug. Klar, eigentlich wäre ein Icon besser das irgendwie einen Bezug zum Blognamen oder Inhalt hat, aber ich wollte nach einer Weile den Wiedererkennungswert nicht verlieren und hatte für eine Kombination nie eine Idee.
Die größere Variante könnte leicht unscharf sein, weil ich später mit einem fantastischen Skalierer für Pixelgrafiken aus der kleinen Vorlage ein größeres Icon gemacht habe. Das sollte ein Blogartikel werden, den schrieb ich aber scheinbar nie. Das Icon war meiner Erinnerung nach aber 256x256. Für das Apple-Touch-Icon habe ich das dann wieder etwas herunterskaliert. 192x192 war damals wohl eine akzeptabel erscheinende Zwischenlösung, die gerade auch für Android passte. Im evilmartians-Artikel wird jetzt 180x180 für dieses Icon empfohlen.

Das neue SVG

Um diese Icons zu optimieren musste aber erstmal ein SVG des Favicons her. Erst versuchte ich mit Inkscapes "Trace Bitmap"-Funktion, aus meinem größeren alten Favicon ein SVG zu bauen. Das Ergebnis sah trotz mehreren Versuchen so aus:

Hat was, aber war nicht das gesuchte Ergebnis. Diese leeren Flächen müsste ich dafür manuell reparieren, was mir zu aufwändig war. Also recherchierte ich nochmal und fand eine Empfehlung für https://png-to-svg.com/. Tatsächlich war dessen Ergebnis deutlich besser. Die einzelnen Flächen mussten immer noch übereinandergeschoben werden, weil zumindest in Inkscape weiße Linien zu sehen waren, aber es war viel weniger Leerraum zu füllen. Und ein paar Ecken bearbeitete ich dann noch manuell, wie den Schnabelübergang.

Ich folgte noch der Empfehlung, das SVG mit SVGO zu optimieren:

npx svgo --multipass favicon.svg

Dann hatte ich dieses Ergebnis:

SVG mit Darkmode

Von einem Umschalten im Dunkelmodus ist da aber noch nichts implementiert. Aber SVGs sind Textdateien, mit einem Editor lässt sich das einbauen. Erstmal nahm ich wieder Inkscape zur Hand und versuchte mich an einem Entwurf:

Da werden also fast alle Farben auf eine gesetzt. Das lässt sich dann ins originale favicon.svg einbauen. Es bekommt ein neues Mediaquery für die Füllfarbe einer Klasse:

<style>@media (prefers-color-scheme:dark){.a{fill:#9da0ae !important}}</style>

Und alle SVG-Elemente, die umgefärbt werden sollen, bekommen diese Klasse, z.B.:

<path id="path1" d="… class="a" style="…" />

Das resultierte in diesem finalen SVG:

Erstellen von .png und .ico

Ob mit oder ohne Darkmodeumschalter, das SVG alleine reicht nicht. Erstmal sollen alte Browser eine Ausweichlösung bekommen. Für sie erstellte ich ein .ico:

inkscape ./favicon.svg --export-width=32 --export-filename="./tmp.png"
convert ./tmp.png ./favicon.ico

Die Anleitung empfiehlt an der Stelle zu prüfen, ob das Icon herunterskaliert auf 16x16 auch noch gut aussieht, ansonsten sollte ein passgenaues erstellt und dem .ico (als Layer) hinzugefügt werden. Ich fand das bei meinem Icon nicht nötig.

Außerdem braucht es ein größeres PNG, das z.B. im Appleuniversum benutzt wird. Dafür nutzte ich Gimp, und zwar so: Zuerst das SVG öffnen und als 140x140px große Grafik importieren. Dann unter Image -> Canvas Size das Canvas auf 180x180 vergrößern, dabei über den Button rechts den Inhalt zentrieren:

Das Ergebnis lässt sich dann als apple-touch-icon.png exportieren. Beide neuen Dateien so aus:

Zum Vergleich, hier nochmal die entsprechenden Dateien von vorher:

Der finale Code

Damit sind alle Dateien zusammen. favicon.svg, favicon.ico und apple-touch-icon.png lud ich dann auf den Server und passte den Code im head der Seite an:

<link rel="icon" href="/favicon.ico?v=1" sizes="32x32">
<link rel="icon" href="/favicon.svg?v=1" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png?v=1">

Ich benutzte dafür bereits ein HTML-Nugget-Plugin von Serendipity, so brauchen die Templatedateien keine Anpassung. Das ?v=1 bei den Links zu den Dateien hilft Browsern dabei, nicht die im Cache liegenden alten Dateien zu verwenden.

Und das sollte es tatsächlich gewesen sein. Bei mir in Chrome und Firefox wird laut Netzwerkinspektor wirklich das favicon.svg geladen. Das sollte dann auch an verschiedenen Orten benutzt werden, die gerne größere Icons anzeigen, beispielsweise die Startseite von Firefox. Die fiel vorher auf das Apple-Touch-Icon zurück. Das zudem sollte nun etwas schärfer sein, aber das ist speziell für diesen Blog und hat mit dem SVG-Ansatz erstmal nichts zu tun. Wobei ich da auf Applenutzer angewiesen wäre: Taugt das Icon so wie es ist, oder braucht es beispielsweise noch einen farbigen Hintergrund?

Warum habe ich anders als in der Vorlage beschrieben keine Manifestdatei erstellt? Weil diese Seite keine PWA ist, offline nicht funktioniert. Die Datei würde ich nachreichen, wenn in Android-Browsern oder -Launchern die Manifestdatei trotzdem nützlich wäre, um bessere Icons anzuzeigen. Das fand ich aber nirgends sauber beschrieben. Müsste ich also erstmal selbst testen.

Auf den ersten Blick also eine gelungene Operation. Denn das neue Favicon wird angezeigt und müsste nun in mehr Situationen unabhängig der Größe scharf bleiben.
Allerdings: Zwar war es interessant zu sehen, dass SVG-Favicons mittlerweile tatsächlich funktionieren. Aber mir fiel zumindest in meinen Browsern kein relevanter Qualitätsgewinn auf. Die vorherige Kombination aus großem Apple-Touch-Icon und kleinem regulären Favicon in Pixelgrafik war – so mein Stand jetzt – bereits keine schlechte Lösung. Vor allem, wenn das Icon so gestaltet wird, dass es sowohl auf hellem als auch auf dunklem Hintergrund funktioniert. Immerhin, das deckt sich mit der Vorlage, dernach man auf das Windows Tile Icon, das Safari Pinned Icon und die Einbindung des Favicons via rel="shortcut" verzichten kann. Egal, ob das eigene Favicon nun ein SVG ist oder nicht.

Abseits der Technik werde ich nun aber nochmal über das Iconmotiv nachdenken.