Web-Browser

Die einfachste Variante sind Favicons. Microsoft hat sie mit dem Internet-Explorer 5 eingeführt, um ursprünglich ein Icon für die Bookmarks bereitzustellen. Mittlerweile werden sie aber auch als Icon bei den Tabs von vielen Web-Browsern angezeigt.

Zum Erstellen nutze ich einfach immer einen Generator. Es gibt zwei Varianten, um ein Favicon einzubinden. Zum einen kann die Datei mit dem Namen favicon.ico im Hauptsverzeichnis abgelegt werden und zum anderen per Eintrag im Header:

<link rel="icon" href="http://example.com/favicon.ico" type="image/x-icon">

Apple iOS

Apple hat nun mit iOS eine weitere Möglichkeit hinzugefügt. Und zwar kann hier eine Website direkt als Verknüpfung auf dem Homescreen abgelegt werden. Um dafür ein Icon zu konfigurieren, muss ein Meta-Tag Eintrag hinzugefügt werden. Apple hat dazu eine Dokumentation online gestellt. Durch die unterschiedlichen Geräte gibt es mittlerweile vier Varianten an Auflösungen:

<link rel="apple-touch-icon" sizes=”57x57” href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-retina.png" />
<link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-retina.png" />

Die Grafiken dafür können auch eckige Kanten haben, da die Geräte selbst die runden Ecken erstellen und einen Glas-Effekt darüber legen.

Android

Für Android ist es ganz einfach, hier funktionieren nämlich die gleichen Anweisungen wie für iOS. Schön, dass es Android genauso unterstützt, wobei mir eine neutrale Variante vom W3C besser gefallen hätte.

Windows 8

Mit der neuen Kachel-Oberfläche von Windows 8 gibt es auch hier die Möglichkeit, eine Website abzulegen. Dafür sind drei Meta-Tag-Anweisungen nötig: Name, Logo und Farbe der Kachel. Alternativ stellt Microsoft einen Generator zur Verfügung.

<meta name="application-name" content="Name">
<meta name="msapplication-TileImage" content=logo.png">
<meta name="msapplication-TileColor" content="#123456">

Windows Phone 8

Und zum Schluss noch die Phone Variante von Windows. Ich finde die Oberfläche von Windows Phone 7/8 sieht mit den Kacheln richtig schick aus – mir gefällt die Optik einfach. Auch hier gibt es eine Möglichkeit, Websites auf dem Homescreen abzulegen. Direkt im Internet Explorer auf “Weitere” klicken und dann “Auf Startseite” auswählen. Microsoft hat dazu eine offizielle Anleitung online gestellt.

Der Haken ist allerdings, dass Microsoft keine Möglichkeit vorgesehen hat, die Optik der Kacheln zu individualisieren. Stattdessen wird eine Vorschau der Website erstellt und eingebunden. Was nicht immer ganz gut aussieht. Jetzt haben findige Entwickler aber einfach eine Website erstellt, die aussieht wie eine Kachel. Damit kann man das Problem umgehen, aber Google hat noch einen eleganteren Weg gefunden.

Wenn ein Windows Phone erkannt wird, wird direkt unter dem Suchfeld ein Button eingeblendet, der den Benutzer auffordert, die Seite hinzuzufügen. Wird der Button nun geklickt, blendet Google ein DIV-Element über die komplette Seite mit einem Logo und darunter eine kleine Anweisung, was der User nun machen muss. Der Clou dabei ist, dass die Anweisung einfach abgeschnitten wird, da nur der obere Teil verwendet wird. Und zusätzlich ist das Logo als SVG-Grafik realisiert, dadurch sieht der Screenshot auch immer gut aus.

Windows Phone 8 Screenshot