Windows 8 Tile Icon zur Website hinzufügen

windows-8-tile-icon

Das Interface von Windows 8 zeichnet sich u.a. durch bunte Kacheln mit einfarbigen weißen Icons im Startmenü aus. Neben Programmicons können hier auch Websites „angeheftet“ werden um vom Startmenü aus einen Schnellzugriff auf die Seite zu ermöglichen. Mit einer kleinen Anpassung im head der Website können Titel, Farbe und Icon dieses „Tile Icons“ festgelegt werden.

Seminar: Responsive Web Design für Konzeptioner, Projektleiter und Designer

In diesem Seminar lernen Sie alle Aspekte von Responsive Design kennen, ohne dabei tiefer als notwendig in die technischen Details einzusteigen.

Berlin, 29. + 30. September 2016

Tile Icon erstellen

Zunächst sollte ein Tile Icon in der Größe von 144x144 Pixeln und mit transparentem Hintergrund erstellt werden. Farbige Icons sind zwar auch möglich, entsprechend der Design-Guideline von Windows fügen sich einfarbige Icons aber besser in den Gesamtlook ein. Speichert das Icon im PNG-Format ab und verschiebt es ins Stammverzeichnis der Website. Hier dürften bereits ein Favicon und ein Apple Touch Icon liegen.

Meta-Tags für Tile Icons

Nun muss eine Anpassung am Quellcode der Website vorgenommen werden. Kopiert folgende Meta-Tags in den head und passt die Inhalte an. Neben dem Titel der Kachel und dem Pfad zum bereits erstellten Icon, muss eine Hintergrundfarbe angegeben werden. Hier sind Hexadezimal und RGB-Werte möglich. Der Titel sollte nicht länger als 2x 13 Zeichen sein, ansonsten wird er abgeschnitten (Danke an Michael für die Info).


<meta name="application-name" content="kulturbanause">   
<meta name="msapplication-TileImage" content="tile-icon.png">
<meta name="msapplication-TileColor" content="#014454">

Websites zum Startmenü hinzufügen

Wenn alle Änderungen gespeichert und hochgeladen sind, kann die Website im Internet Explorer 10 über den Button „An Start anheften“ zum Startmenü hinzugefügt werden.

Über den Internet Explorer 10 können Websites zum Startmenü hinzugefügt werden
Über den Internet Explorer 10 können Websites zum Startmenü hinzugefügt werden

Anschließend kann das Tile Icon wie alle anderen Kacheln auch positioniert werden. Per Klick öffnet sich die Website im IE10.

Tile Icon im Startmenü von Windows 8
Tile Icon im Startmenü von Windows 8

Windows Tile Icon unter Windows Phone 8

Bedauerlicherweise scheint das Tile Icon unter Windows Phone 8 nicht zu funktionieren. Wenn du mehr weißt, freue ich mich auf deinen Kommentar.

Links / Quellen: