Was ist ein Favicon?
Bei einem Favicon (= Favorite Icon) handelt es sich meistens um eine vereinfachte Form eines Logos, welches in einem Browser-Tab links neben dem Titel einer Webseite angezeigt wird.
(= PIXELTALE Favicon)
Auch beim Abspeichern der Seite als Lesezeichen wird das Favicon dem Eintrag vorangestellt.
Wozu dient das Favicon?
Das Favicon dient grundsätzlich 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.
Browser suchen automatisch nach einem Favicon
Beim Aufruf einer Webseite sucht ein Browser automatisch nach dem Favoriten Icon. Ist keines vorhanden, wird nach längerer Suche schließlich ein 404-Fehler auf dem Webserver zurückgegeben. Dies führt zu einer längeren Seitenladezeit. Auch wenn die Verzögerung insgesamt minimal ist, sollte im Rahmen der PageSpeed Optimierung dennoch auch die Einbindung eines Favicons erfolgen.
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 Sie Ihr originales Firmenlogo als Favicon einsetzen können. Da Favicons jedoch sehr klein und zudem quadratisch sind, sieht das nicht immer optimal aus. Besteht Ihr 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 Ihre Marke beim Anblick des Favicons eindeutig erkennbar sein, weswegen zumindest die Firmenfarben und am besten auch die Initialen darin enthalten sein sollten.
Da Sie mit den meisten Grafik- bzw. Bildbearbeitungsprogrammen Dateien nicht im erforderlichen .ico-Format abspeichern können, können Sie 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 Sie Ihre Datei anschließend in das .ico-Format umwandeln können. Einige empfehlenswerte Favicon Generatoren sind:
Wie binde ich ein Favicon in meine Webseite ein?
Der einfache Weg:
Wichtig bei dieser Variante ist, dass die Favicon Datei den Namen „favicon.ico“ trägt, da Browser gezielt nach einer Datei mit diesem Namen suchen. Diese Datei sollten Sie in das Root-Verzeichnis Ihrer Webseite hochladen, sodass Sie die Datei über folgenden Pfad erreichen können: www.ihredomain .de/favicon.ico
Für einen Großteil der Browser reicht dies schon aus, um das Favicon selbstständig zu finden und in der erforderlichen Auflösung darzustellen. Aber eben nicht für alle.
Der sichere Weg:
Sicherer ist es daher, den Verweis auf ein Favicon zusätzlich noch im Kopfbereich der Webseite einzubinden.
Da Sie hier den Pfad zur Datei manuell eingeben, können Sie den Namen des Favicons in diesem Fall frei wählen. Abhängig vom Dateiformat des Favicons müssen Sie folgende Code-Zeilen in das HTML-Dokument einfügen:
Mit dem „rel-Attribut“ wird festegelegt, dass es sich um ein Icon handelt, wobei beim Internet Explorer die Bezeichnung „shortcut icon“ benutzt wird.
„Type“ gibt an, um welchen Dateityp es sich handelt. „Sizes“ gibt die Größe an und mit href teilen Sie dem Browser mit, wo er die Datei in Ihrem Verzeichnis findet.
Allerdings müssen Sie nicht zwangsläufig für jede Favicon Größe eine separate Datei einbinden. Es reicht in der Regel, wenn Sie nur ein Favicon in der Größe 32×32 verwenden. Browser, die eine kleinere Auflösung benötigen, skalieren das Favicon im Normalfall dann selbst auf die kleinere Größe.
Favicon in WordPress einbinden
Ab WordPress 4.3 können Webmaster ein Favicon bequem über den Theme Customizer einbinden.
Einbindung des Apple Touch Icons für mobile Geräte mit dem iOS Betriebssystem
Damit das Favicon auch auf Apple Geräten optimal dargestellt wird, sollte dieses als PNG-Datei in einer Größe von 180×180 vorliegen und wie folgt in den Kopfbereich der Website eingebunden werden:
Ein Apple Touch Icon wird insbesondere auch dazu verwendet, wenn ein Nutzer eine Website für einen schnelleren Zugriff auf dem Home Screen des Iphones oder Ipads abspeichern möchte. Der bei älteren iOS-Versionen (iOS 6 und älter) für die App-Darstellung typische Glanz-Effekt und die abgerundeten Ecken werden dabei von Apple automatisch erzeugt.
Möchten Sie jedoch keinen Glanz-Effekt oder abgerundete Ecken, können Sie das Favicon auch mit dem Zusatz „precomposed“ einbinden:
