Hallo #FrontendFriday-Leser/in, habt ihr euch schon einmal gefragt, warum Browser-Tabs ein kleines Icon anzeigen? Diese sogenannten Favicons helfen uns, schnell die richtige Webseite zu finden. Doch das ist längst nicht alles, was die kleinen Symbole können…
Was ist ein Favicon?
Favicons sind die kleinen Icons, die ihr im Browser neben dem Webseiten-Titel seht. Schaut euch das Bild an – mit Sicherheit hat euch das Icon gereicht, um die Webseite zu erkennen, oder?
Quelle: Eigene
Der Name Favicon ist eine Abkürzung für „Favorit Icon“ und wurde ursprünglich dafür entworfen, in euren Favoriten- oder Lesezeichenlisten angezeigt zu werden. Microsoft hat ein solches Icon das erste mal 1999 im Internet Explorer 5 dargestellt [1].
Verwendungszwecke und Vorteile
Obwohl der Name Favicon suggeriert, dass es nur für Favoriten gedacht ist, wird es in Wirklichkeit für alle Webseiten im Browser angezeigt – unabhängig davon, ob sie als Favorit markiert sind oder nicht.
Der Hauptzweck eines Favicons ist es, die Wiedererkennbarkeit einer Webseite zu erhöhen. Stellt euch vor, ihr hättet bei euren Browser-Tabs nur Texte ohne Symbole – das Navigieren wäre deutlich mühsamer! Durch das Favicon kann der Benutzer die gewünschte Seite schnell finden und sofort erkennen, um welche Website es sich handelt. Das Branding eurer Website wird so ebenfalls verstärkt.
Durch JavaScript kann das Favicon auch dynamisch ausgetauscht werden, um beispielsweise auf neue Nachrichten hinzuweisen.
Favicons auf verschiedenen Plattformen
Initial für PCs gedacht, haben sich mit der Zeit weitere Anforderungen an Favicons ergeben, um die Integration für mobile Geräte und auch Progressive Web Apps (PWAs) zu unterstützen. Für z.B. eine PWA wird das entsprechend definierte Favicon als App-Icon verwendet. Hier gibt es je nach Plattform unterschiedliche Anforderungen bezüglich Format und Auflösung. Auch für das Theme des Browsers – Light oder Dark Mode – können eigene Favicons definiert werden.
Praktische Tipps für die Umsetzung
Am besten schaut ihr euch die Bedingungen eurer Zielplattform an und erstellt das Favicon entsprechend. Auf Wikipedia findet ihr eine gute Übersicht [1]. Zusätzlich gibt es Webseiten wie den RealFaviconGenerator [2], der euch die Recherche-Arbeit abnimmt und passende HTML-Snippets sowie klare Anweisungen zum Einbinden generiert. Mit diesem Tool könnt ihr auch bestehende Favicons testen und sicherstellen, dass sie den Best Practices entsprechen – je nachdem, welche Zielplattformen ihr unterstützen wollt.
Fazit
Auch wenn es nur ein kleines Detail ist, macht das Favicon die Navigation deutlich einfacher und trägt zur Wiedererkennung einer Webseite bei. Umso wichtiger ist es, dass das Favicon sorgfältig erstellt wird und repräsentativ für eure Website ist.
Quellen:
[1] https://en.wikipedia.org/wiki/Favicon
[2] https://realfavicongenerator.net/
Der Beitrag It’s #FrontendFriday – Favicons: Das kleine Icon mit großem Nutzen erschien zuerst auf Business -Software- und IT-Blog – Wir gestalten digitale Wertschöpfung.
Business -Software- und IT-Blog – Wir gestalten digitale Wertschöpfung