Favicon
Das Favicon (=Favourite Icon) dient grundsätzlich dazu, eine Webseite mit einem kleinen Icon wiedererkennbar zu machen. Häufig wird hierzu das Logo der Webseite verwendet.
Wo wird das Favicon angezeigt?
Am häufigsten ist das Favicon in der Registerkarte direkt neben dem Webseitentitel zu sehen. Zusätzlich begegnet man dem Favicon auch noch an folgenden Stellen:
- als Lesezeichen-Symbol (Mobil und Desktop)
- bei Smartphones als Desktop-Verknüpfungs-Symbol
- bei Windows 8 und 10 als Kachel im Startmenü
- bei Suchmaschinenergebnissen
Wie implementiere ich das Favicon?
Generell sollte das Favicon im .ico Format vorliegen. Die gängigsten Browser unterstützen zwar mittlerweile auch die Dateiformate PNG, GIF, JPG und teilweise auch SVG, allerdings gibt es auch heutzutage noch Browser, die das Favicon ausschließlich im .ico Format erkennen. (bspw. Internet Explorer 5-10)
Zum Einbinden des Favicons gibt es zwei Möglichkeiten. Nachfolgend stelle ich beide Varianten vor, nehme aber vorweg, dass Variante zwei bevorzugt genutzt werden sollte, da die erste Variante nicht browserübergreifend funktioniert.
1. Favicon im Rootverzeichnis Ihrer Webseite ablegen (veraltet)
Die ursprüngliche Methode ein Favicon einer Webseite hinzuzufügen war es, eine Datei mit dem Namen „favicon.ico“ im Rootverzeichnis abzulegen. Ohne zusätzlichen HTML Code wurde nun das Favicon entsprechend geladen. Die meisten modernen Browser untersuchen auch heutzutage noch das Rootverzeichnis nach dieser Datei, sofern sich kein anderer Verweis auf ein Favicon im Code befindet.
2. Einbindung über HTML
Als das Favicon zu den HTML-Standards hinzugefügt wurde, erfolgte die neue Möglichkeit, dass Favicon über den <link> Tag im <head> Bereich einzubinden. Dort kann nun auch jeder beliebige Pfad angegeben werden und man ist nicht mehr auf das Rootverzeichnis beschränkt.
<html>
<head>
<link rel="shortcut icon" href="favicon.ico" />
</head>
</html>
Favicon Checker
Um zu überprüfen, ob das Favicon für jeden Anwendungsfall erfolgreich implementiert ist, findet man im Netz viele Checker, mit denen sich eine Analyse durchführen lässt. Mit folgendem Favicon Checker habe ich gute Erfahrungen gemacht und finde die Darstellung des Ergebnisses sehr übersichtlich. Aus eigener Überzeugung empfehle ich diesen weiter: Favicon Checker
Failed to load resource: the server responded with a status of 404 (Not Found)
Dieser Fehler tritt auf, sofern sich im Rootverzeichnis der Webseite keine Datei „favicon.ico“ befindet und keine Einbindung über HTML erfolgt ist. Der Fehler ist zwar für den Benutzer nicht sichtbar, wird aber im Webseiten Server Log (traffic report) protokolliert.
Um den Fehler zu beseitigen, gibt es 3 Lösungswege:
- Implementierung eines unsichtbaren Favicons im Rootverzeichnis
- Favicon über HTML Code einbinden (siehe Abschnitt „Einbindung über HTML“)
- Mithilfe der .htaccess lässt sich das Problem mit folgendem Code ebenfalls beheben:
<IfModule mod_alias.c>
RedirectMatch 403 favicon.ico
</IfModule>Abgrenzung Touch Icon
Das Favicon ist vorrangig für die Desktop-Browser vorgesehen, wobei das Touch Icon für die mobilen Endgeräte definiert wurde. Als Touch Icon wird das Symbol bezeichnet, welches dargestellt wird, sobald man auf dem Home-Screen seines Smartphones ein Lesezeichen einer Webseite ablegt.
Bei der Implementierung der Touch Icons fahren die Betriebssysteme Apple, Android und Windows keine einheitliche Linie. Die einzige Gemeinsamkeit besteht darin, dass alle die Implementierung im <head> Bereich vorsehen. Nachfolgend werde ich Beispiele zu den genannten Betriebssystemen darstellen.
Apple Touch Icon
<html>
<head>
<link rel="apple-touch-icon" href="/images/favicon.png" />
</head>
</html>Android Touch Icon
<html>
<head>
<link rel="shortcut icon" href="/images/favicon.png" sizes="196x196" />
</head>
</html>Windows Tile Icons
<html>
<head>
<meta name="msapplication-square70x70logo" content="/images/favicon-70x70.png" />
<meta name="msapplication-square150x150logo" content="/images/favicon-150x150.png" />
<meta name="msapplication-wide310x150logo" content="/images/favicon-310x150.png" />
<meta name="msapplication-square310x310logo" content="/images/favicon-310x310.png" />
</head>
</html>