Was ist ein Favicon?
Das Favicon („Favorite Icon“) ist meistens eine vereinfachte Form eines Logos, welches im Browser-Tab links neben dem Titel einer Webseite angezeigt wird. Auch beim Hinzufügen einer Webseite als Lesezeichen wird das Favicon dem Eintrag vorangestellt.
Wozu braucht man ein Favicon?
Das Favicon dient dem Wiedererkennungswert einer Webseite. Vor allem, wenn ein Nutzer mehrere Webseiten in einem Browser gleichzeitig geöffnet hat, bietet das Favicon eine gute Orientierungshilfe. Durch die visuelle Nähe des Favicons zum Firmenlogo, kann ein User direkt erschließen, welche Webseite sich innerhalb eines Tabs befindet, ohne diesen erst anklicken zu müssen. Damit kann sich die Verwendung eines Favicons auch positiv auf die Nutzerfreundlichkeit und User Experience einer Webseite auswirken. Zudem vertrauen Nutzer unbewusst einer Internetpräsenz mehr, wenn diese über ein Favicon verfügt.
Geschichte und Entwicklung des Favicons
Der Internet Explorer 5 der Firma Microsoft ermöglichte 1999 zum ersten Mal die Darstellung eines Favicons. Daher stammt auch die Bezeichnung Favicon, welches ein Kunstwort des Begriffs „Favorite Icon“ ist. Denn die Lesezeichenliste des damaligen Internet Explorers wurde schlicht „Favoriten“ genannt.
Mit der ebenfalls 1999 veröffentlichten Version HTML 4.01, sowie kurz darauf im Jahr 2000 mit XHTML 1.0, wurden Favicons vom World Wide Web Consortium (W3C) erstmals standardisiert.
Heute wird die Darstellung eines Favicons von allen gängigen Webbrowsern unterstützt. Damals wie heute sucht der Browser beim Aufruf einer Webseite dabei automatisch nach einer Datei namens „favicon.ico“ im Wurzelverzeichnis der Seite. Existiert die Datei, wird sie als Favicon hinterlegt und hauptsächlich für die Darstellung in Browsertabs und Lesezeichenlisten verwendet.
Wie groß sollte ein Favicon sein?
In den Anfängen des Internets wurde ein Favicon nur für die Ausgabe in Browsern auf Desktop-Bildschirmen angelegt. Eine Größe von 16 x 16 Pixeln galt damit lange Zeit als Standard.
Über die Jahre kamen jedoch immer mehr neue Browser und Endgeräte dazu, sodass sich auch die Anforderungen an ein Favicon änderten. So kann die erforderliche Favicon Größe je nach Browser variieren. Auf mobilen Endgeräten wie Smartphones wird dabei eine höhere Auflösung benötigt, als auf Desktop-PCs, damit das Favicon auch auf dem deutlich kleineren Bildschirm noch gut zu erkennen ist.
Folgende Tabelle gibt einen Überblick über aktuell genutzte Favicon Größen:
Welches Dateiformat sollte ein Favicon haben?
Das Standardformat eines Favicons ist nach wie vor das .ico-Format. Zwar sind die meisten Browser inzwischen in der Lage, Favicons mit den Dateiendungen .png, .gif, jpg und teilweise auch .svg problemlos darzustellen, dennoch gibt es auch heute noch Plattformen, die Favicons nur im .ico-Format erkennen. Dazu zählt beispielsweise der Internet Explorer in den Versionen 5-10, aber auch in sozialen Netzwerken wird das Favicon neben einer Verlinkung der Website nur angezeigt, wenn dieses im .ico-Format vorliegt.
Um auf Nummer sicherzugehen, dass das Favicon über alle Plattformen hinweg problemlos genutzt werden kann, sollte dieses also stets als .ico-Datei abgespeichert werden.
Das Format ico ist dabei eine Art Container, in welchem Bilddateien unterschiedlicher Auflösungen abgelegt werden können. Je nachdem, welche Auflösung gerade von der Anwendung benötigt wird, wird dann das jeweilige Bild in der richtigen Größe aus dem Container abgerufen.
In der Regel enthält der Container dabei das Favicon in den Größen 16×16 Pixel, 32×32 Pixel, 48×48 Pixel und 64×64 Pixel.
Wie erstelle ich ein Favicon?
Am idealsten ist es, wenn du dein originales Firmenlogo als Favicon einsetzen können. Da Favicons jedoch sehr klein und zudem quadratisch sind, sieht das nicht immer optimal aus. Besteht dein Logo beispielsweise sowohl aus einem Symbol, als auch aus einem Schriftzug, dann empfiehlt es sich, einfach das alleinstehende Symbol als Favicon zu verwenden. In jedem Fall sollte deine Marke beim Anblick des Favicons eindeutig erkennbar sein, weswegen zumindest die Firmenfarben und am besten auch die Initialen darin enthalten sein sollten.
Da du mit den meisten Grafik- bzw. Bildbearbeitungsprogrammen Dateien nicht im erforderlichen .ico-Format abspeichern kannst, kannst du das Favicon zunächst normal als .png oder .jpg-Datei speichern. Dabei sollte die Auflösung des Favicons von Anfang an so groß wie möglich sein oder bestenfalls als Vektordatei erstellt werden, die sich beliebig groß ohne Qualitätsverlust skalieren lässt.
Es existieren unzählige kostenlose Favicon Generatoren, mit welchen du deine Datei anschließend in das .ico-Format umwandeln kannst. Einige empfehlenswerte Favicon Generatoren sind:
Wie binde ich ein Favicon in meine WordPress-Webseite ein?
Ab WordPress 4.3 können Webmaster ein Favicon bequem über den Customizer einbinden.
Klicke hierzu im WordPress-Dashboard auf den Menüpunkt „Design“ und dann auf „Customizer“. Hier klickst du dann auf den Reiter „Website-Informationen“. Ganz unten hast du dann die Möglichkeit, dein Favicon hochzuladen:
Das war es auch schon!
