Shop Blog Kontakt

Windows 8 Tile Icon – Kachel für Deine Website erstellen

Die grafische Gestaltung und die Handhabung von Microsoft aktuellsten Betriebssystem Windows 8 zeichnet sich u.a. durch bunte Kacheln mit einfarbigen weißen Icons auf der Startoberfläche aus. Neben Programmicons können hier auch Websites „angepappt“ werden um vom Startmenü aus einen Schnellzugriff auf die Seite zu ermöglichen. Mit einer kleinen Anpassung im <head>-Tag der Website können Titel, Farbe und Icon dieser „Tile Icons“ festgelegt werden.

Tile Icons – How to do it

Zunächst sollte ein Tile Icon in der Größe von 144×144 Pixeln und mit transparentem Hintergrund erstellt werden. Farbige Icons sind zwar auch möglich, entsprechend der Design-Guidelines 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.

<meta name=“application-name“ content=“chriz schwarz“ />
<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 (ab Version 10) über den Button „An Start anheften“ 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.

Dieser Beitrag wurde erstellt am 12. Oktober 2013 von Christian Schwarz (chriz)

Kommentare sind geschlossen.

Habe ich Ihre Interesse geweckt? Nehmen Sie Kontakt mit mir auf.
#chrizschwarz