Anzeige
Anzeige
Analyse
Artikel merken

Favicons: So setzt du sie als dynamische Status-Indikatoren ein

Mit dynamischen „Favicons“ erhältst du einen zusätzlichen Informationskanal für deine Webseite. Wir verraten dir, wie du dynamische „Favicons“ umsetzt und zeigen dir die technischen Grenzen auf.

Von Ilja Zaglov
2 Min. Lesezeit
Anzeige
Anzeige

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

Favicons im Google Chrome. (Bild: t3n.de)

Anzeige
Anzeige

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.

Anzeige
Anzeige

Mit dem folgenden Snippet kannst du ganz einfach mithilfe von JavaScript das „Favicon“ ändern:

Anzeige
Anzeige
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.

Anzeige
Anzeige
Dynamische Favicon Demo

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.

Anzeige
Anzeige

Was hältst du von variablen Favicons? Sinnvoll oder unnütze Spielerei?

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
5 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Uwe

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…

Antworten
BlackY

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 =)

Antworten
Fran Kee

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…

Antworten
BlackY

>> 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?

Antworten
René

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!).

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige