Favicons: So setzt du sie als dynamische Status-Indikatoren ein
Dynamisches Favicon mit Badge. (Grafik: favico.js)
Zuerst, was ist ein „Favicon“? Das sind die kleinen quadratischen Icons, die neben der URL im Adressfeld oder im jeweiligen Tab innerhalb eines Browsers dargestellt werden und sich auch in der Lesezeichen-Leiste im Browser wiederfinden.
Favicons im Google Chrome. (Bild: t3n.de)
In der Regel werden „Favicons“ als Grafik – das berühmte „favicon.ico“ – im Hauptverzeichnis der Webseite abgelegt und automatisch vom Browser geladen. Akternativ können sie aber auch mithilfe eines meta-Elements eingebunden werden, sodass auch andere Grafik-Formate eingebunden werden können. So ist es möglich, animierte Favicons im GIF-Format zu hinterlegen und so zusätzliche Aufmerksamkeit zu erzeugen.
<link rel="icon" href="http://example.com/favicon.ico" type="image/x-icon">Dynamische „Favicons“
Unter „dynamischen Favicons“ versteht man „Favicons“, die je nach Bedarf ihr aussehen verändern können. Dabei wird natürlich immer ein neues „Favicon“ dynamisch nachgeladen. Webworker haben somit die Möglichkeit, „Favicons“ dynamisch zu beeinflussen und so neben dem title-Element zusätzliche Informationen an den Benutzer zu übermitteln.
Mit dem folgenden Snippet kannst du ganz einfach mithilfe von JavaScript das „Favicon“ ändern:
document.head || (document.head = document.getElementsByTagName('head')[0]);
function changeFavicon(src) {
var link = document.createElement('link');
link.type = 'image/x-icon';
link.rel = 'shortcut icon';
link.href = src;
document.getElementsByTagName('head')[0].appendChild(link);
};Leider führt diese Methode nicht in allen Fällen zum gewünschten Erfolg, sodass beispielsweise im Chrome und Safari das Favicon unverändert bleibt.
Um dieses Problem zu umgehen, wurde die Bibliothek „favico.js“ ins Leben gerufen. Mit der handlichen Bibliothek ist es möglich dein Favicon zu ändern, es mit Badges zu versehen oder sogar durch ein Video zu ersetzen.
Beispiel für dynamische Favicons. (Grafik: favico.js)
Favico.js funktioniert mit Chrome, Firefox und Opera. Internet Explorer 10 und Safari stehen derzeit noch auf der To-Do-Liste des Entwickler-Teams. Auf der offiziellen Projekteseite von favico.js bekommst du die kostenlose Open-Source-Bibliothek und erfährst, wie du sie einsetzen kannst.
Sind „Favicons“ ein Mehrwert?
Während Video-„Favicons“ derzeit wohl mehr Spielerei sind, können dynamische „Favicons“ zu einer nützlichen Erweiterung in Webprojekten werden. Besonders bei Websites mit häufigen Aktualisierungen, wie beispielsweise Zeiterfassungssystemen oder Kommunikationssystemen, kann ein Einsatz von dynamischen „Favicons“ sinnvoll sein und so kann man seine Benutzer auch mit Browser-Tabs auf etwaige Veränderungen aufmerksam machen.
Übertreiben sollte man es natürlich nicht. Wie bei allen Animationen und dynamischen Inhalten auf Websites gilt hier der Grundsatz: Weniger ist mehr. Denn: Aus User-Sicht können zehn offene Tabs, die mit sich ständig ändernden „Favicons“ ausgestattet sind, sehr schnell nervend werden.
Was hältst du von variablen Favicons? Sinnvoll oder unnütze Spielerei?
An sich eine feine Sache… Wenn man jetzt aber bedenkt, dass die Ladezeiten der Website und die Anzahl der Requests – gerade im Mobil-bereich – immer wichtiger werden, weiß ich nicht, ob es sinnvoll ist, noch eine JS-Datei „nur“ wegen einer kleinen Animation einzubinden…
Da stimme ich Uwe zu. Ich selbst überlege immer erst einmal ob sich zusätzlicher Code überhaupt auszahlt. Für eine kleine Spielerei würde ich nicht viel Code nachladen oder gar einen weiteren HTTP-Request absetzen. Für Social Networking Sites oder Seiten, bei denen es viele Benachrichtigungen gibt, finde ich diese Idee aber nicht schlecht.
MFG BlackY =)
Ich würde möglichst schon ein neues Icon mit der Page hinschicken.
Auch das ist ja relativ dynamisch, also je nach Seite möglich.
Animierte Icons? Ziemlich dicht am blink-Tag, wenn man da oben mehrere Tabs offen hat…
Und dann hätte man eventuell ein Wörtchen zum Thema cache-header Informationen verlieren sollen. (z.B. ein angezeigter Kalendertag wie bei Google Cal muss zum Ende des Tages expiren…) So Icons sind per default cachemässig überdurchscnittlich zäh…
>> So Icons sind per default cachemässig überdurchscnittlich zäh… <<
Oh ja, dass dauert immer ne ganze Weile bis der Browser es gemerkt hat das man ein neues Icon hat. Gibts da irgendnen besonderen Trick um das zähe Verhalten zu unterbinden?
Also im Mobilen Sektor sehe ich kein Problem, einfach das Script für mobile Endgeräte sperren und weg ist das Problem. Natürlich sollte man bei einer „normalen“ Seite ohne Interaktion nicht jede 3 Sekunden das Favicon wechseln, aber da wo es angebracht ist kann es ganz nett sein (besser als Töne in meinen Augen!).