Favicon
Klein aber nicht zu übersehen
Dieses Icon ist nicht nur ein wichtiger Teil des Corporate Design, sondern es schafft auch Vertrauen. Nutzer fühlen sich sicherer eine Seite zu besuchen, auf der das Logo anstelle des Platzhalters angezeigt wird. Außerdem wirkt es sich positiv auf die Usability und somit das Google Ranking aus, da Suchmaschinen gezielt nach Favicons suchen und so längere Ladezeiten und 404-Fehlermeldungen vermieden werden.
Der Name „Favicon“ setzt sich aus den englischen Begriffen "favourite" und "icon" zusammen und bezeichnet so eine kleine Grafik, die im Browserfenster in der Adresszeile erscheint, um der Webseite Wiedererkennungswert zu verleihen. Dies ist besonders praktisch beim Anlegen eines Lesezeichens, oder sollten zu viele Tabs geöffnet sein um den vollen Titel der Seite anzuzeigen.
Erstellung eines Favicons
Zunächst ist es wichtig eine Grafik bzw. ein Logo zu wählen, welches auch in der kleinsten Auflösung von 16 x 16 Pixeln noch gut zu erkennen ist. Die Grundform des Favicons ist daher auch quadratisch, kann aber so gespeichert werden, dass auch runde Formen oder ein transparenter Hintergrund dargestellt werden können. Die Erstellung eines Favicons erfolgt meist über gängige Bildbearbeitungsprogramme wie Photoshop, welche mithilfe von Plug-Ins .ico-Dateien abspeichern können. Andernfalls lassen sich mit Favicon Generatoren Bilder hochladen, welche diese anschließend in allen geläufigen Größen ausgeben. Häufig wird hierbei ebenfalls der zugehörige HTML-Code ausgegeben. Ein alter Trick aus Zeiten ohne Favicon Generator ist das Abspeichern als .png Datei, welche bereits in der richtigen Größe angelegt wurde. Anschließend kann man durch einfache Änderung des Dateinamens eine .ico Datei erstellen.
Andere Dateiformate wie .png oder .gif können ebenfalls gelesen werden, müssen jedoch anders eingebunden werden.
Hierbei ist zu beachten, dass Favicon nicht gleich Favicon ist. Um eine optimale Anzeige zu erreichen, sollten die kleinen Symbole auf den Browser sowie das Endgerät angepasst werden. Mobile Endgeräte erfordern eine höhere Auflösung als für die Darstellung auf dem Desktop. Allgemein ist zu empfehlen, die Grafik anfangs so groß wie möglich oder als Vektordatei zu erstellen, da sie sich so ohne Qualitätsverlust skalieren lässt.
Favicons für Desktopdarstellung
Es gibt zwei Möglichkeiten eine Verknüpfung zwischen Webseite und Favicon herzustellen. Als favicon.ico Datei wird es automatisch erkannt, wenn es im Rootverzeichnis einer Domain liegt. Da jedoch nicht alle Browser diese Funktion unterstützen ist hiervon abzuraten. Soll die Grafik anders benannt werden oder aus einem anderen Dateiformat bestehen, so muss im <head>-Bereich einer HMTL-Datei angegeben werden:
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
Die Standardbezeichnung in HTML ist "icon", für Internet Explorer wird jedoch "shortcut icon" verwendet. Für andere Browser muss das Dateiformat auch nicht .ico heißen, hier können oben genannte Dateien ebenfalls verwendet werden.
Favicons für Smartphones
Die Favicons bei Smartphones werden auch Touch-Icons genannt und benötigen eine höhere Auflösung, daher sollten .png Dateien verwendet werden. Auch hier muss die favicon.ico Datei im Rootverzeichnis liegen. Für Android wird eine höhere Auflösung von 32 x 32 Pixel als favicon.png Datei benötigt.
Damit ein Icon auf Apple-Endgeräten richtig angezeigt wird, muss die Datei apple-touch-icon.png im Rootverzeichnis liegen, um eine 404-Fehlermeldung zu vermeiden. Diese Dateien werden automatisch durch abgerundete Ecken, Schattenwurf sowie Glanz auf die Darstellung von Apple angepasst. Um dies zu vermeiden muss stattdessen apple-touch-icon-precomposed angegeben werden. Die Auflösung sollte hier möglichst bei 180 x 180 Pixel liegen, von älteren Browsern wird die Grafik herunterskaliert. Apple Geräte benötigen zwar keine Referenz im HTML, doch für Android-Geräte ist dies notwendig.
Für die Darstellung auf Windows Tiles sollte die Datei mstile-144x144.png im Rootverzeichnis liegen, kann aber durch browserconfig.xml umgeleitet werden. Die Hintergrundfarbe der Kachel kann durch msapplication-TileColor bestimmt werden.
Im HTML-Code sollte somit stehen:
<link rel="shortcut icon" href="/favicon.ico">
<link rel="icon" type="image/png" href="/favicon.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon.png" sizes="96x96">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
Möchte man die gezielte Skalierung umgehen, so bietet sich die Verwendung von SVG Grafiken an. Diese lassen sich stufenlos Skalieren und sind somit in der Zukunft immer geläufiger.
<link rel="icon" type="image/svg+xml" href="favicon.svg" sizes="any">
