Favicon unter der Lupe
Eigentlich hatte ich etwas mehr Resonanz auf das kleine Rätsel um mein Favoritenicon erwartet (wobei es auch an der ungünstigen zeitlichen Positionierung des Artikels liegen könnte), aber anscheinend hat sich doch niemand so richtig mit dem kleinen Viereck auseinander gesetzt, das jetzt schon ein paar Wochen die Bookmarkleisten (sofern ihr Bookmarks benutzt) beziehungsweise die Adressleisten meiner Leser ziert.
Alle die sich vor dem Studium der Auflösung zuerst doch noch einmal selbst mit dem Viereck beschäftigen wollen, gebe ich vor dem Klick auf “Weiterlesen” jetzt nochmal eine Chance dies zu tun…
Gut, also doch der leichte Weg? Naja, ich will mal nicht so sein.
Da ich mich ja öfter mit Programmieren beschäftige dachte ich mir: Machst du mal ein Favicon, das schön abstrakt ist und sich für jeden Besucher verändert. Möglichst mit ein paar “privaten” Daten drin. Als erstes musste dazu natürlich auf eine Datei verwiesen werden, die kein statisches Symbol ausgibt bzw. enthält sondern dies dynamisch bei jedem Aufruf erzeugt. Ich wählte dazu, wie sollte es anders sein, PHP. Wer einen Blick in den Quelltext meiner Webseiten wagt, der wird jedoch feststellen, dass ich nicht etwa wie hier beschrieben mit einem -Tag auf die PHP-Datei verwiesen habe sondern einen anderen Trick angewandt habe, nämlich das mod_rewrite-Modul von Apache:
RewriteRule favicon.ico /scripts/favicon.php [L]
Diese Konfigurationszeile bewirkt, dass bei einem Aufruf der Standard-URL nicht wirklich nach einer realen Icon-Datei gesucht wird, sondern statt dessen das oben genannte Skript ausgeführt wird. Das war schonmal ganz nett, einen Nachteil hat es allerdings (noch): Der IE kommt nicht damit zurecht, dass es in Wirklichkeit keine ICO-Datei ist, die er bekommt sondern eine PNG-Datei (der Mime-Header stimmt allerdings…). Aber auf die armen IE-Nutzer kann man eh keine Rücksicht nehmen… 😉
So, nun wären wir also beim Skript. Dieses benutzt ein paar Daten, die es sowieso bekommt und packt sie binär kodiert (die hellen und dunklen Stellen im Bild) in das Icon. Insgesamt ist das Icon 16×16 Pixel groß und würde, wenn man jedes Pixel als ein Bit benutzt, also Platz für insgesamt 256 Bit bieten, also 32 Byte. Das ist doch schonmal ne Zahl, mit der man spielen kann. Fehlen nur noch die Daten, die wir da reinpacken können.
Was liegt da näher, als ein paar “persönliche Informationen” des Benutzers zu nehmen, im Endeffekt sieht ja sowieso nur er dieses Bild. Und was ist das Persönlichste, was der Internet-Datenverkehr zu bieten hat? Richtig, die IP-Adresse. Zusammen mit der Uhrzeit des Zugriffs wird der Benutzer nämlich recht identifizierbar (allerdings nur bei Verdacht auf eine Straftat… oder wenn der Sysadmin des Providers nix zu tun hat 😛 ). Ich habe mich schließlich dazu entschlossen, die IP-Adresse (4 Byte bei IPv4, IPv6 unterstütze ich grade nicht), den verwendeten Port (2 Byte) und die Uhrzeit (nochmal 4 Byte) zu benutzen, zusammen mit einer kleinen statischen Nachricht (2 Byte). Da diese Informationen insgesamt nur 12 Byte benutzen hatte ich also noch ein bisschen Platz. Aber dieses “Problem” war auch schnell gelöst.
Kommen wir also nun zur finalen Aufteilung des Favicons (und damit zum letzten Abschnitt dieses langen Artikels):
Anatomie des Favicon (Klick zum Vergrößern)
Wie man sieht ist nur noch ein sehr kleiner Bereich unbenutzt. Wer genauer hinschaut, der stellt sicherlich auch schnell fest, woran das liegt: richtig, ich habe für jedes Bit zwei Pixel benutzt. Ein billiger Trick natürlich, aber erstens sieht es so besser aus (die einzelnen Pixel waren kaum zu erkennen) und zweitens habe ich eh nicht mehr Daten. Somit sind die Daten eigentlich 24 Byte groß. Wenn man jetzt noch den Rand abzieht (zwei Zeilen zu je 16 Pixel plus 14 Pixel an jeder Seite; macht insgesamt 60 “Bit”). Somit bleiben nur noch
$$256 – 192 – 60 = 4 Bit$$
Das ist das kleine Viereck rechts unten, das in der Ausgabe immer die gleiche Farbe hat.
So, wäre also das “Rätsel um das Viereck” geklärt. Zumindest fast, denn ein kleines Geheimnis habe ich noch nicht verraten… Wer bekommts raus?
Gruß
Xp