Favicon
Bei einem Favicon handelt es sich um eine sehr kleine Bilddatei im .ico-Format in einer Größe von mindestens 16x16 Pixeln, die der Wiedererkennung einer Webseite dient. Wird diese Grafik im HTML-Code einer Webseite hinterlegt, wird sie beim Abruf der Seite mit dem Browser in der Registerkarte angezeigt. Der Begriff setzt sich zusammen aus den englischen Bezeichnungen favorite (dt. Favorit) und icon (dt. Symbol) und kann frei mit „favorisiertes Symbol“ übersetzt werden. Verwandt mit dem Favicon ist das für Smartphone-Apps gebräuchliche App-Icon. Von den App Icons unterscheiden sich Favicons vor allem in der Auflösung, da durch die hohen Auflösungen moderner Touch-Displays die optischen Anforderungen an App Icons höher sind als an Favicons.
Ursprung
Das Favicon wurde von Microsoft erstmals im Jahr 1998 vorgestellt, als der Konzern den Internet Explorer 5 als Betaversion launchte.[1] Schon im Jahr 1999 wurde das Favicon von Microsoft mit dem offiziellen Start des IE 5 eingeführt. Neben der Verwendung in Browser-Registerkarten wurden Favicons auch angezeigt, wenn Nutzer Webseiten als Verknüpfung auf dem Desktop speicherten. Die starke Verbreitung und Verwendung der Bilddateien hängt eng mit der Verbreitung des Windows-Betriebssystems zusammen. Bis bei anderen Browsern wie Firefox oder Netscape die Anzeige von Favicons möglich waren, vergingen noch mehr als zwei Jahre. Auch Apples Safari war erst drei Jahre später in der Lage die kleinen Bildgrafiken anzuzeigen. Heute können alle gängigen Browser mit Favicons umgehen.
Verwendung
Favicons sind in verschiedenen Umgebungen zu finden:
- in Browserregisterkarten
- in Suchergebnislisten von Suchmaschinen, zum Beispiel bei DuckDuckGo
- in Lesezeichen auf dem Windows-Desktop
- in der Adressleiste des Internet Explorers
- im Startmenü von Windows
- bei im Browser hinterlegten Lesezeichen
- in Linkverzeichnissen
- Grafik
Favicon erstellen
Ein Favicon wird als .ico-Datei abgespeichert. Dabei handelt es sich nicht um eine eigene Bilddatei, sondern um einen Container, der mehrere Bilder enthalten kann. Üblicherweise wird das Favicon in einer Größe von 16x16 Pixeln abgespeichert. Moderne Browser können das Bild jedoch auch skalieren, weshalb ebenso Favicons im Format 32 x 32 Pixel verwendet werden können. Durch die sehr hohe Auflösung moderner Bildschirme empfiehlt es sich, auf die 32 x 32 Pixel große Variante zurückzugreifen. Vor allem wenn ein Logo mit vielen Details verwendet wird, empfiehlt sich die höhere Auflösung, da sonst gegebenenfalls Logo-Inhalte verloren gehen.
Grundsätzlich kann jede quadratische Grafik als Favicon umgewandelt werden. Online-Shops oder große Marken verwenden zum Beispiel ihr Logo als Favicon. Gängige Bildbearbeitungsprogramme wie Photoshop benötigen ein entsprechendes Plugin, um .ico-Dateien zu erzeugen. Das kostenlose Programm Gimp verfügt über diese Möglichkeit auch ohne Plugin. Daneben lässt sich auch andere Software nutzen, mit der die Grafik im PNG-Format abgespeichert werden kann. Danach stehen im Web zahlreiche Generatoren zur Verfügung. Üblicherweise transformiert der Generator die Datei abschließend in das .ico-Format.
Die PNG-Datei bietet sich an, weil sie nur sehr wenig Speicherkapazität benötigt. Auf diese Weise kann zusätzliche Ladezeit eingespart werden, die für eine gute Performance der Seite wichtig ist. Eine besondere Variante der statischen Kleingrafik sind animierte Favicons. Da es sich bei der .ico-Datei lediglich um einen Container handelt, kann der Inhalt zum Beispiel auch aus einer.gif-Datei bestehen.
Favicons in eine Webseite einbinden
Grundsätzlich stehen zwei Methoden zur Einbindung eines Favicons in eine Webseite zur Auswahl.
- Speichern der Datei im Root-Verzeichnis der Domain:
Nachdem die .ico-Datei erstellt wurde, kann sie im Root-Verzeichnis abgelegt werden, zum Beispiel so: www.meineseite.de/meinfavicon.ico Auf diese Weise können Browser die Datei auslesen und sie anzeigen. Ein Nachteil dieser Methode besteht darin, dass nicht alle Browser sie unterstützen.
- Hinterlegen im <head>-Bereich der Webseite:
Zunächst wir das Favicon auf der Domain abgespeichert und anschließend der Link im Quellcode im <head>-Bereich hinterlegt. Der Linkverweis muss zusätzlich das rel-Attribut „icon“ verwenden. Damit die Anzeige auch im Internet Explorer funktioniert, muss die Bezeichnung „shortcut icon“ lauten.
Beispiel:
<link rel="shortcut icon" type="image/x-icon" href="/_themes/default/images/shortcut-icon.png" />
Nutzen für SEO
Der größte Nutzen des Favicons besteht darin, dass der Wiedererkennungswert einer Webseite erhöht wird. Zugleich kann die Usability gestärkt werden, da Nutzer die Seite schneller wiederfinden, wenn sie sie zum Beispiel als Lesezeichen abspeichern. Das Favicon kann auch als Trustsignal für Nutzer dienen, die eine Seite beim Surfen im Web anhand der Grafik einzuordnen wissen, wenn sich zum Beispiel das bekannte Firmenlogo im Favicon wiederfindet. Als Alleinstellungsmerkmal kann das Favicon auch Suchmaschinen wie Google dabei helfen, eine Webseite eindeutig zu identifizieren.
Einzelnachweise
- ↑ Favicons: Kult ums Quadrat spiegel.de Abgerufen am 26.10.2017