Touch- & Favicons – so behalten Sie den Überblick
Auf dem Feld der Touch- und Favicons kocht aktuell jeder Hersteller sein eigenes Süppchen. Das Ergebnis sind über 30 verschiedene Größenanforderungen und Einbindungsarten – für eigentlich nur eine Aufgabe. Ziemlich chaotisch … finden wir. Chaos genug, um es zu Entwirren und einen Weg zu finden, damit umzugehen.
Favicon
Fangen wir mit dem übersichtlichen Feld der Favicons an. Der Name leitet sich von dem englischen Wort „Favorite“ ab. Wie der Name daher schon vermuten lässt, wird das Favicon bei den Lesezeichen gezeigt. Ist eine Webseite in einem Browser als Lesezeichen gespeichert, wird das Favicon neben dem Seitentitel in der Lesezeichenliste angezeigt. Zudem findet das Favicon im Browser-Tab Verwendung. Auch hier wird es neben dem Seitentitel angezeigt. Im folgenden Ausschnitt werden die Favicons zur Verdeutlichung hervorgehoben.
Das Favicon wird von den Browsern in einer Größe von 16×16 px dargestellt. Da wir aber auch die hochauflösenden Bildschirme beachten müssen, ist es ratsam das Favicon in der doppelten Größe, also 32×32 px, zu hinterlegen. So wird das Favicon u.a. auch auf den sogenannten Retina-Displays scharf dargestellt. Mehr zum Thema hochauflösende Bildschirme haben wir in einem anderen Blog-Beitrag beschrieben.
Die Einbindung des 32×32 px großen Favicons passiert im head-Bereich der HTML-Webseite. Dieser Bereich ist für den Webseiten-Nutzer nicht lesbar. Hier wird das Favicon verlinkt. Damit der Browser diesen Link auch als Favicon erkennt, wird das Attribut „rel“ gesetzt. Laut HTML-Standard wird als rel-Attribut der Wert „icon“ für Favicons gesetzt. Hier tanzt aber der Internet Explorer aus der Reihe, dieser erwartet für Favicons dea rel-Attribut „shortcut icon“.
<link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon">
Üblicherweise wird das Favicon in dem Dateiformat .ico hinterlegt. Im Netz findet man einige Konverter, die PNG-Bilder mit Transparenzen in das Format .ico umwandeln. Der Kreativitiät sind also durch das ICO-Format keine Grenzen gesetzt. Ein Beispiel für einen solchen Konverter finden Sie auf convertico.com.
Touch Icon
Touch Icons kamen mit dem Aufstieg der Smartphones einher. Auf Smartphones ist es möglich, Lesezeichen auf dem Home-Screen anzulegen. Dafür wurde ein großes, quadratisches Icon benötigt, welches dann in der typischen Kachel-Ansicht genutzt werden konnte. Zudem nutzen gängige Browser wie der mobile Chrome Browser diese Touch Icons auf der Startseite des Browsers. Hier werden beliebte Seiten angeboten, ebenfalls in einer Kachel-Optik.
Sämtliche Touch Icons werden, wie auch das Favicon, im head-Bereich jeder HTML-Seite eingebunden.
Apple Touch Icon
Apple war im Bereich der Touch Icons Vorreiter und definierte eine Anforderung zur Einbindung eines Touch Icons – das sogenannte „Apple Touch Icon“. Android schloss sich dem an und greift auch – noch – auf dieses Apple Touch Icon zu.
Da sich die Auflösung der Smartphone-Displays in den letzten Jahren extrem gesteigert hat, gab es an die Größe dieser Icons mit jedem neuen Display andere Anforderungen. So kam ein Größen-Katalog mit um die 10 Größen-Anforderungen zusammen. Von 57×57 px bis zu 180×180 px. Den Glanzeffekt, runde Ecken oder Schatten werden von jedem Betriebssystem (z.B. iOS, Android) individuell zu dem Icon hinzu gerechnet. Daher muss das Touch Icon diese Effekte nicht enthalten. Auch ist es so, dass ein Icon, welches zu groß ist, von dem Betriebssystem heruntergerechnet wird. Hierbei kann es zu leichten Unschärfen kommen, die aber zu verkraften sind. Somit reicht es, ein Apple Touch Icon in der aktuell größten Größen-Anforderung zu hinterlegen (aktuell 180×180 px für das iPhone 7).
<link rel="apple-touch-icon" href="/images/clickstorm-touch-icon.png">
Android Touch Icon
Der obenstehende Code zeigt die Einbindung des Apple Touch Icons. Android greift aktuell auch auf die Apple Touch Icons zurück, allerdings ist dies bereits als „deprecated“ markiert. Das bedeutet, dass dies in Zukunft nicht mehr passieren wird. Daher muss für Android ein eigenes Touch Icon hinterlegt werden. Google empfiehlt für die Touch Icons auf Android-Systemen die folgende Einbindung des Touch Icons in der Größe 196x196px.
<link rel="shortcut icon" href="/images/clickstorm-touch-icon.png" sizes="196x196">
Windows Tile Icons
Somit haben wir bereits ein Apple Touch Icon eingebunden, welches für iOS und – noch – für Android gilt. Dieses haben wir in der größten bisher angeforderten Größe eingebunden, welches auch die kleineren Touch Icons abdeckt. Für neuere Android Geräte haben wir zudem ein Touch Icon mit der von Google empfohlenen Größe eingebunden. Natürlich hat Windows auch sein eigenes Süppchen gekocht und greift im Gegensatz zu Android nicht auf das Apple Touch Icon zu. Daher muss für Windows Smartphone noch ein weiteres Touch Icon eingebunden werden, das sogenannte Tile Icon.
Für Windows sollten unterschiedliche Tile Icons in verschiedenen Größen hinterlegt werden. Windows hat einen kleinen Style-Guide für die Tile Icons erstellt. Auf welche Größen man sich hier konzentrieren will, ist jedem selbst überlassen. Eine Übersicht aller Größen ist in dem Style-Guide zu finden. Wir empfehlen die Größen 70×70 px, 150×150 px, 310×150 px und 310×310 px.
<meta name="msapplication-square70x70logo" content="/images/tile-70x70.png"> <meta name="msapplication-square150x150logo" content="/images/tile-150x150.png"> <meta name="msapplication-wide310x150logo" content="/images/tile-310x150.png"> <meta name="msapplication-square310x310logo" content="/images/tile-310x310.png">
Fazit
Ein Favicon sollte jede Webseite mitbringen. Der Aufwand ein solches zu erstellen und zu hinterlegen ist sehr gering. Bei den Touch Icons ist es schon etwas komplizierter, zu entscheiden, was genau man einbinden will. Da jeder Betriebssystem-Hersteller auf dem Gebiet seine individuellen Anforderungen stellt und die geforderten Größen sich durch die besseren Displays ständig verändert haben, ist ein großes Chaos entstanden. Es gibt wahnsinnig viele Größen die man bedienen kann, gerade unter Windows.
Aber man muss sich hierbei auch mal wieder auf den Boden der Tatsachen zurückholen. Die Touch Icons sind ein nettes Feature. Versteifen sollte man sich auf die Touch Icons aber nicht. Eine gut funktionierende responsive Webseite bietet dem Nutzer schlussendlich doch deutlich mehr Mehrwert als 30 liebevoll hinterlegte Touch und Tile Icons in jeder erdenklichen Größe.
Sie wollen sich mehr auf Ihre mobilen Kunden konzentrieren? Wir helfen Ihnen Ihre Webseite mobil zu optimieren und einige Touch Icons zu hinterlegen. Sprechen Sie uns an.
