Dynamische Favicons mit Funktion

Die Idee ist ebenso genial wie einfach: Wenn sich ein Benutzer erst einmal an einem System angemeldet hat, besteht eine Session. Besteht eine Session kann ich feststellen wie viele neue Elemente auf den Benutzer warten (zum Beispiel News oder Mails). Jetzt könnte ich zum Beispiel ein Browser-Plugin programmieren, das den Benutzer auf diese neuen Elemente hinweist. Diese Plugins verfügen allesamt über ein eigenes Login-System und die bekanntesten Vertreter sind wohl zum Beispiel die GMail Alerts bzw. die Google Reader Checker.

Screenshot von Tinycon

Dies ist ganz nett, aber für den Anbeiter auch sehr mühseelig, da er vom Prinzip her für jeden Browser ein Plugin programmieren müsste. Viel sinnvoller wäre es doch, den Counter direkt im Favicon auszugeben. Und was soll ich sagen? Geht! ;) Ein gutes Beispiel das man dies in der freien Wildbahn produktiv verwenden kann ist Buffer. Schicken einem dort die Administratoren oder das System eine Mail wird dies im Favicon direkt angezeigt. Geht natürlich in allen Browsern und erspart einem die Plugin-Entwicklung.

In allen Browsern: naja, fast! Favicons können sich zu einer Qual entwickeln. Die Frage ist nämlich: wie oft aktualisiert ein Browser ein Favicon? Das Teil wird in der Regel einmal heruntergeladen und dann gecached. Ein erneuter Download erfolgt dann in unregelmäßigen Abständen. Es hat aber auch nie jemand behauptet, das ein Favicon nur ein GIF oder ein PNG sein kann! ;)

Frei nach dem Motto „Brave new World“ könnte man ein Canvas Element nehmen, das als Favicon ausgeben und darüber hinaus den Local Storage von HTML5 einbeziehen. Funktioniert wunderbar, und wie zu erwarten war in jedem Browser anders! ;) Deshalb braucht es an der Stelle jede Menge Fallbacks. Das eigentliche Favicon legt man wie gehabt in den Webspace und hat es somit in allen Browsern, mittels Javascript versucht man jetzt nur noch den Störer direkt auf das Favicon zu packen.

Lässt man den Internet Explorer einmal außen vor funktioniert dies wunderbar, wie man in dieser Demo hier sehen kann. Tinycon ist eine feine Javascript-Bibliothek, die auf GitHub gehostet, Funktionen zur Verfügung stellt, um diese dynamischen Favicons abzubilden. Dass das Skript nicht in meinem Internet Explorer funktioniert kann nur eine momentane Begleiterscheinung sein, er zeigt im Moment nämlich auch das „normale“ Favicon das „ganz normal“ im Webspace liegt nicht an.

Die Einsatzmöglichkeit der dynamischen Favicons ist faktisch unbegrenzt und der Nutzen groß. Ich glaube es war Google die bei GMail als erste diese Technik verwendet haben. Was jetzt noch irgendwie fehlt wäre eine dynamische Größe von Favicons (doppelt breit zum Beispiel) bzw. ein halbwegs geeigneter Standard zu dem Thema – ich bin immer noch der Meinung das Favicons rein aus Versehen existieren! ;)

Ähnliche Beiträge

Mit Repo.js GitHub-Repositories in die eigene Seit... GitHub ist eine echt feine Sache, ich habe trotz der recht interessanten Preisgestaltung erst vor kurzem auf einen Premium-Account gewechselt. Es mach...
Skalierbare JavaScript Application Architektur Ich habe gerade bei Nettuts ein interessantes Video gefunden, das ich euch nicht vorenthalten möchte. In rund einer Stunde erklärt Nicholas Zakas eine...
Google Maps API – Geocodierung In den bisherigen Teilen des Tutorials haben wir eine Adresse immer mittels der Koordinaten übergeben. Wie schon festgestellt birgt das einiges an Pro...
Modernizr – HTML5 und CSS3 mit Fallback Manchmal ist der Teufel ein Eichhörnchen, und scheinbar hat er sich an einem langen Winterabend überlegt, der beste Weg die Menschheit zu quälen wären...

Eine Antwort auf „Dynamische Favicons mit Funktion“

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.