Stranger Than Usual

Katzensilhouette

Das Favicon meines Blogs ist irgendwie langweilig:

Ein grünes, großes S in Serifenschrift.

Ich habe es erst recht spät hinzugefügt. Wenn ich git log richtig lese, dann erst 2020, nur wenige Monate bevor ich auf den neuen static site generator umgestiegen bin. Ich wollte damals vor allem ein Favicon, besser als keins, und habe also etwas sehr Einfaches genommen.

Die PNG-Datei des Favicons ist auch nur 212 Byte groß, das ist weniger als der Overhead, den der HTTP-Request erzeugt, um diese Datei zu laden. Dafür ist das Icon auch nur 64×64 Pixel groß. Ausreichend für ein kleines Icon im Browser, aber an vielen Stellen werden ja heutzutage größere Icons verwendet. Ideal wäre also eine SVG-Datei.

Aber wie schon gesagt, das Icon selber ist langweilig. Wenn ich es schon ändere, kann ich es ja auch direkt interessanter machen. Ich meine, im Ernst: „S“? Ich bin doch nicht Supermann (und auch nicht Syndrome, aus The Incredibles). Also vielleicht irgendwas, was zu diesem Blog passt. Aber was passt denn? Keine Ahnung.

Auf der anderen Seite: Ich mag Katzen, und Katzen gehen im Internet immer gut. Und ich hätte auch eine Idee. Ich habe nämlich dieses Foto unseres 2020 verstorbenen Katers:

Foto eines Katers vor einem Fenster gegen das Licht. Praktisch sieht man nur einen weißen Hintergrund und einen konturlosen Vodergrund, in dem ein sitzender Kater, ein Zweig mit Blättern und ein paar Teile des Fensters zu erkennen sind.

Dieses Foto eignet sich hervorragend, um davon ein Binärbild zu machen, nur schwarz und weiß. Das habe ich schon vor Jahren mal aus Spaß gemacht:

Binärvariante des oben beschriebenen Bildes, nur sind weniger interessante Teile weggeschnitten. Es bleibt der Kater, ein Zweig mit Blättern und der untere Fensterrahmen,

Als Favicon sollte es transparent und quadratisch sein. Also noch ein bisschen croppen…

Noch einmal dasselbe Binärbild, aber dieses Mal ist nur die Katze im Bild und der Hintergrund transparent.

Schön, das sind um die 700×700 Pixel, als WEBP nur ungefähr 1,4 kiB groß. Eigentlich bräuchte ich nicht einmal eine SVG-Datei, denn das hier ist schon klein genug. Aber irgendwie wäre eine SVG-Datei schon einfacher zu handhaben und würde die durch den Binärfilter eckig gewordenen Kanten abrunden. Also habe ich mir Inkscape geschnappt, alle Regler auf ein möglichst kleines Ergebnis eingestellt und eine SVG-Datei erstellt, die ich dann mal wieder mit svgo und von Hand optimiert habe.

Zunächst nur ein bisschen komprimiert:

Wieder die Katzensilhouette. Die sitzende Katze hat glattere Ränder und schwebt jetzt in der Mitte des Bildes.

Dumm nur: Die Datei ist mit 4,7 kiB deutlich größer als die Rastergrafik. Selbst komprimiert kommt sie noch auf 1,9 kiB (gz) bzw. 1,7 kiB (Brotli). Aber für das Favicon kann ich noch ein bisschen Qualität schleifen lassen. Das war jetzt mit zwei Nachkommastellen Präzision. Ohne Nachkommastellen sieht es auch noch passabel aus. Die Datei ist dann kleiner als die Webp-Datei, und komprimiert kommt sie auf unter 1 kiB. Analog zum bisherigen Favicon grün gefärbt, sähe das dann so aus:

Noch einmal die Katzensilhouette, dieses mal grün. Die Ohren haben geradere Kanten und sind etwas spitzer.

Ich habe das dann als Favicon ausprobiert und musste feststellen: Es passt nicht. Wenn das in der typischen Icongröße des Browsers gerendert ist, erkennt man nur einen grünen Blob, bestenfalls etwas, das ein Fuß sein könnte. Aber die Katze erkenne zumindest ich nicht darin.

Ich habe dann stattdessen erst einmal wieder das alte Favicon genommen, allerdings in einer SVG-Version. Die ist mit knapp 943 Byte (467 gz, 439 brotli) zwar größer als das bisherige Favicon, sieht herunterskaliert noch gut aus und lässt sich auch hochskalieren.

Ein großes, grünes S in Serifenschrift.

Also viel Arbeit, wenig Ergebnis. Und ich habe immer noch kein nicht-langweiliges Favicon.