kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Windows 8 Tile Icon zur Website hinzufügen

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.

Workshops und Seminare von kulturbanause

Unsere Seminar-Termine für 2018 sind online!

Jetzt Tickets sichern!

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:

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

12 Kommentare

  1. Marcos

    Verfasst am 18. Februar 2013 um 21:42 Uhr.

    Ich hatte mein favicon direkt am „wp-login.php“ eingefügt …gerade ein upgrade gemacht ….paff! :(
    Deswegen bin ich hier wegen dein Code für “ log ins“ …hatte keine Ahnung von „Apple Touch Icon“ und das mit den „Windows 8 Icon“!
    So lernt man … ;)

  2. Joerg

    Verfasst am 18. Februar 2013 um 22:06 Uhr.

    Wenn die zweite Angabe der Pfad ist muss das sicher „tile-icon.png“ heißen, oder?

    • Jonas Hellwig

      Verfasst am 18. Februar 2013 um 23:01 Uhr.

      Danke für die Info. Vertipper behoben :)

  3. OuP

    Verfasst am 19. Februar 2013 um 11:06 Uhr.

    Moin,

    habe dies versucht auf kommunalwirtschaft.eu umzusetzen. Leider ohne Erfolg. Kann aber auch sein, dass einen Unterschied zwischen dem IE als Desktopversion in der touchbasierten gibt. Mein IE wird immer im Desktiopmodus gestartet.

    Auf dem Windows Phone 8 (lumia 920) klappt es auch nicht. Sowohl dein Blog, wie auch kommunalwirtschaft.eu werden nur als Webseiten-Screenshot angezeigt.

    Gruß
    David

    • Jonas Hellwig

      Verfasst am 19. Februar 2013 um 13:03 Uhr.

      Also ich musste die Website mehrmals neu laden bis das Icon erkannt wurde. Da scheint etwas gecached zu werden.

    • Mat

      Verfasst am 19. Februar 2013 um 13:09 Uhr.

      Auf Windows 8 (Desktop) macht er das Tile scheinbar auch nur, wenn der IE auch als Standardbrowser definiert wurde. Hat man beispielsweise Chrome als Standard definiert, öffnet a) der IE immer in der Desktopansicht, und b) das Tile wird nur mit einem Standard-Icon angezeigt.

  4. Mat

    Verfasst am 19. Februar 2013 um 11:07 Uhr.

    Habe mich grad gestern mit dem Thema beschäftigt, als ich über die MS-Website http://www.buildmypinnedsite.com gestolpert bin (via http://www.modern.ie, wo das ein Prüfkriterium ist).
    Bin dann auch davon ausgegangen, dass Win Phone 8 das Tile selbstverständlich auch erkennt – scheinbar aber Fehlanzeige! Beim HTC 8X, das ich hier habe, hat es zumindest nicht funktioniert.
    Ich bin dann auf diesen Artikel gestossen, der das Win 8-Tile mit ziemlichem Aufwand und Script auf dem Win Phone 8 nachbaut: http://goo.gl/81YLz
    Für mich zu aufwändig. Wenn das nicht OS-übergreifend schlau geht, dann bleibt’s halt draussen…

  5. Miriam Giese

    Verfasst am 20. Februar 2013 um 11:38 Uhr.

    Hallo Jonas,

    ich finde Deinen Beitrag echt super und habe das auch gleich in meine Seite eingebaut.
    Ich habe mich nur gefragt, ob es so eine Funktion auch für Android gibt und wenn ja wie man das umsetzen kann?
    Gibt es da bereits etwas?

    Liebe Grüße
    Miri

  6. Michael

    Verfasst am 23. Februar 2013 um 16:53 Uhr.

    Der Titel der Website sollte nicht länger als 2 mal 13 Zeichen sein sonst ergibt es nur noch …

  7. Stefan Stern

    Verfasst am 4. März 2013 um 22:03 Uhr.

    Wer eine Weiterleitung nicht scheut, der kann sich hier ein Tile für Windows Phone 8 erzeugen lassen: http://www.cheller.info/wpt/

  8. Eric Windmeier

    Verfasst am 30. April 2013 um 11:37 Uhr.

    Ich habe etwas gefunden, wie Google es schafft, unter Windows Phone eine ordentliche Tile zu platzieren. Windows Phone nimmt ja immer einen Screenshot der Seite auf, wenn man eine Website an die Startseite heftet. Dabei überlagert Google die Seite und platziert dort eine skalierbare SVG-Grafik. Das ist aufwendig, aber sollte auch unter Windows Phone 8 funktionieren:

    http://www.russellbeattie.com/blog/creating-a-pinnable-windows-phone-7-tile-for-your-website-like-google

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.