Meine steuerbare Winkekatze hat immer noch einen lahmen Arm, trotz aller Bemühungen, das zu ändern. Also schreibe ich statt über die Fertigstellung dieser von Unglück verfolgten Katze darüber, wie ich ein paar Kleinigkeiten an der Website verbessert habe.
Die Winkekatzenwebsite gibt es schon eine Weile. Als ich auf sie gestoßen bin, sind mir sofort ein paar Sachen aufgefallen, die ich verbessern wollte: viel zu große Bilddateien, übergroßes CSS und Javascript und vor allem ungültiges HTML. Also habe ich gefragt, und die Leute haben mich an den Code der Seite gelassen. Ich finde so etwas relativ entspannend, weil ja kein beruflicher Druck dahintersteht und ich niemandem Rechenschaft schuldig bin, warum ich gerade zwei Stunden investiert habe, um die Hierarchie der Überschriften zu korrigieren.
Ich habe auch einige Erfolge einfahren können, während ich noch auf ein Micro-USB-Kabel wartete und bevor mir die Lust vorrübergehend vergangen ist. Ich habe
- das fehlerhafte HTML korrigiert
- die Bilddateien verkleinert bzw. besser komprimiert
- Abhängigkeiten aktualisiert
- ein paar Styles verbessert
- opengraph-tags eingeführt (aktuell gemerged, aber nicht deployed)
- unnützes Javascript entfernt
- Favicons eingebaut
Was ich noch vor mir habe: bootstrap aus dem Style der Seite entfernen, was (CSS und Javascript zusammen) mehrere hundert kiB einsparen würde. Aber dafür muss ich ein bisschen Arbeit dort reinstecken (speziell: damit das Menü noch so funktioniert wie bisher), dass ich das erst einmal vertagt habe. Ganz klein werde ich das Javascript auch nicht kriege, weildie MQTT-Bibliothek alleine recht groß ist.
Alles schön. Aber die Sache mit dem Favicon war echt nicht einfach:
Das Favicon-Drama
Bis dahin hatte die Seite kein Favicon. Ich habe gefragt, ob wir eins wollen und direkt einen Vorschlag gemacht. Ich habe einfach eine gemeinfreie SVG-Datei einer Winkekatze genommen, ihr magentafarbene Augen gegeben (analog zu der Katze auf dem Foto auf der Seite) und das als Vorschlag eingereicht:
Das ist erst einmal gut angekommen. Die Sache hatte nur einen Haken: Der Hintergrund ist transparent, und der schwarze Teil der Winkekatze ist ein einzelner Pfad mit Aussparungen. Innere Ohren, Pfoten, Schnauze und Halsband sind also auch transparent. Positiv: Das machte es sehr einfach, die Augen zu färben (einfach ein farbiges Rechteck hinter die Augen gesteckt). Bei Menschen mit dunklem Theme / Dark Mode hingegen sah man von dieser Katze nichts, außer zwei farbigen Augen.
Also habe ich der Katze einen kompletten weißen Hintergrund verpasst. Das gefiel dann auch nicht. Außerdem sah die Katze auf 16×16 Pixel herunterskaliert (Auflösung des Favicons im Browser) eher schlecht aus. Also habe ich erst einmal runterskalierte Varianten der Katze erstellt, indem ich die SVG-Datei gerendert und manuell nachkorrigiert habe, z.B. für 32×32 Pixel:
![]()
Besser, aber löst noch nicht das Problem mit dem transparenten bzw. weißen Hintergrund und ist nur für kleine Auflösungen gut. Für größere Auflösungen brauchten wir weiterhin die SVG-Datei. Oh, und Firefox for Android unterstützt als einziger halbwegs gängiger Browser keine SVG-Favicons. Ich benutze den zwar selber, dachte mir aber: Ein Favicon, das fast überall funktioniert ist besser als keins. Und irgendwann wird dieser Browser das ja auch unterstützen.
An diesem Punkt habe ich angefangen, eine kleine Showcase-Seite (die nicht mehr online ist) zu erstellen, die verschiedene Varianten des Favicons vor verschiedenen Hintergründen zeigt. Zunächst nur schwarz und weiß, später auch verschiedene Grauschattierungen. So bin ich auch auf die verschiedenen Merkwürdigkeiten mit CSS-grau gekommen.
Gut, also wenn der Hintergrund transparent bleiben soll, mache ich halt einen weißen Rahmen um die Katze und weiße Flächen für alle Aussparungen innerhalb der Katze:
Mist. Natürlich ist dann auch zu den Augen hin ein weißer Rand. Das sieht nicht gut aus. Also neuer Versuch: Ich nehme die Winkekatze, kopiere sie, entferne die Aussparungen aus dem Pfad, vergrößere sie ein bisschen und färbe sie weiß. Dann lege die die Augen und die schwarze Katze (zentriert) darüber:
Dann musste ich noch das Firefox-for-Android-Problem lösen. Dafür habe ich eine gerenderte Version als Alternative hinzugefügt. Im HTML-Code verweise ich dann auf beide Varianten mit Größen- und Dateiformathinweisen:
<link rel="icon" type="image/webp" sizes="192x192" href="favicon_192.webp">
<link rel="icon" type="image/svg+xml" href="favicon.svg">
Das funktioniert, auf allen (getesteten) Browsern wird ein Favicon dargestellt. „Aber was ist mit den Pixelvarianten?“, höre ich euch fragen. Nun: Ich habe versucht, die Pixelvarianten auch hinzuzufügen. Das ist aber leichter gesagt als getan: Zwar kann ich einfach zwei weitere passende <link>-Elemente für die Pixelvarianten hinzufügen, aber die Browser… ignorieren die einfach. Sobald eine SVG-Datei da ist, wird immer die SVG-Datei genommen. Selbst wenn ich der explizit eine Größe zuordne. Der Browser sagt: „Hey, für die SVG-Variante muss ich dann insgesamt für alle Größen nur eine Datei laden, also nehme ich die“ und er nimmt sie. Auch wenn es für kleine größen handoptimierte Varianten gibt, die besser aussehen.
Immerhin hat diese Variante dann endlich alle zufrieden gestellt, der PR wurde gemerged und wir haben Favicons für die Winkekatzenseite.










