Endlich neues Favicon – trotz Caching, Scaling & Co. 😅💪

Heuer habe ich mich endlich dazu durchgerungen, mein sehr, sehr angestaubtes Favicon zu aktualisieren, das sogar noch aus der Zeit vor meinem Blautonwechsel stammen dürfte. 😅 Ursprünglich als Teil meines Geburtsposts (15.10.) gedacht, habe ich daraus aber kurzerhand einen eigenen Post gebastelt, denn konkret bin ich beim Erstellen auf zwei Probleme gestoßen:

V.l.n.r: Favicon in 16 × 16, 32 × 32, 96 × 96 und Apples Touchicon in 192 × 192 Pixel

1. Pixelgenaue Grafik skaliert nicht gut

Jetzt ein neues Favicon in z.B. The Gimp schnell erstellt (The Gimp kann auch old-school ICO-Files erstellen), man kann aber nicht einfach ein großes Icon, z.B. mit 96 × 96 Pixel designen und dann verkleinern. Denn dann wird das Ergebnisv durch Antialiasing sehr unscharf. Also habe ich jede Größe mehr oder weniger manuell erstellt (auf Basis von Vektorgrafiken, die ich dann pro exportierter Größe angepasst habe).

Update: Aufgrund von onlis Anregung einerseits ein Vergleich mit dem vorherigen Favicon (es gab nur diese Größe) und ein Vergleich der jeweiligen Größen, wenn diese einfach vom 192 × 192 Pixel großen Apple Touch Icon herunterskaliert (und damit unscharf) wurden. Links außen befindet sich jeweils das für die jeweilige Auflösung erstellte Original, dann in der ersten Reihe ein skalierter PNG-Export einmal von Affinity Designer (AD) und einmal von GIMP (Qualitätsstufen waren bei WebP auf »verlustlos«, bei PNG in GIMP auf höchster Stufe 9, AD hat hier bei PNG keine Einstellung):

Ganz links: Vorheriges Favicon. V.l.n.r.: Vergleiche zweischen Affinity Designer und GIMP.

Bei der 96er-Größe merkt man es fast gar nicht, bei der mittleren 32er-Größe (mit der Legende) schon, bei der 16er-Größe sind die herunterskalierten Versionen unbrauchbar. Interessanterweise tritt der Effekt tatsächlich erst nach dem Export auf. In einem von der UI her vektorbasierten Programm wie Affinity Designer oder GIMP sieht die Größe nach der Skalierung eigentlich noch gut aus. Und selbst die Windows-Vorschau liefert bei der Vorschau im Explorer ein scharfes Bild. Öffnet man das Bild aber oder zeigt es im Browser an, erscheint das unscharfe Endprodukt.

2. Favicons werden je nach App teilweise ewig gecacht

Ist das erledigt, steht man vor dem nächsten Problem, weil Browser und RSS-Reader das alte Icon teilweise ewig im Cache haben (ja, Reeder, ich schaue in deine Richtung!) Ich habe dafür auch keine konkrete Lösung parat, außer, dass ich letztendlich alle üblichen Varianten penibelst im HTML-Header platziert habe – sogar als apple-touch-icon.png, sogar wie überall empfohlen direkt im Rootverzeichnis, nur, um auf Nummer sicher zugehen. Letztendlich hat das in allen Browsern und – nach Wochen (!) – sogar in Reeder (oder lag’s an Feedly?) zum Erfolg geführt.

Der Code sieht bei mir so aus:

<link rel="shortcut icon" type="image/ico" href="/favicon.ico" />
<link rel="icon" type="image/png" href="/media/favicon-16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/media/favicon-32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/media/favicon-96.png" sizes="96x96">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="192x192">


Design

Im Prinzip ist das Favicon eine reduzierte Version meiner generischen Teaser-Card für Posts auf Social Media: Statt der kompletten, wenn man so will, Wortmarke »benedikt.io« nur der Buchstabe b, inklusive des gewohnten Rahmens samt »Verbindungslinie« nach rechts zur Außenwelt. Es gäbe wohl kreativere Ansätze, in meinem Blogfeed-Ordner scheint es mir, wenn auch nicht unbedingt herausstechend, zumindest unverwechselbar zu sein.

Eure Meinung

Ist euch das neue Favicon schon aufgefallen und wenn ja, wie gefällt es auch? Hattet ihr mit euren Favicons ähnliche Herausforderungen oder gar Tipps, wie man oben beschrieben Probleme effizienter lösen kann? Auf euer Feedback freue ich mich wie immer in den Kommentaren!