Windows 8 Web App Start Screen Tiles

Having had to certify a Web Application for use on the HTC Windows Phone 8X, as well as the Microsoft Surface Tablet, I was interested in providing a Start Screen Tile similar to that of the application’s current iOS Web Clip Icon. Not the least, the new Tile Based UI in Windows 8 presents significant UX improvements over that which has been seen in previous versions of Windows; thus, I felt compelled to take advantage of the new UI from a Web Application context.

Conveniently, adding a Windows 8 Start Screen Tile (Pinned Site) can be accomplished quite easily, and in much the same way as that which is used when specifying a Web Application to run in standalone-mode on iOS. To do so, one need only add additional meta elements with a name attribute of msapplication- followed by a specific Tile property. A standard content attribute can then be used to provide the corresponding attribute value.

For example, a Tile can be defined with a specific color using msapplication-TileColor:

Likewise, a specific Tile image can be provided using msapplication-TileImage:

Note: Tile images should be 144x144px, in .png format (transparent).

This site, for instance, utilizes both of the above:

While creating and defining a Start Screen Tile is simple enough, Microsoft also provides a handy Web based utility which allows for automating the Pinned Site creation process by generating a selected Tile Image in the correct dimensions, and providing the corresponding source at www.buildmypinnedsite.com

{ 3 comments ... add another one! }

  1. Seems to fail on Windows Mobile 8? Go the META entries on my site (ekit.co.uk) and adding on a nokia 620 just used the screenshot still?

    Any ideas about windows mobile tiles for web apps?

  2. Seems to fail on Windows Mobile 8? Go the META entries on my site (ekit.co.uk) and adding on a nokia 620 just used the screenshot still?

    Any ideas about windows mobile tiles for web apps?

  3. Windows Mobile 8 seems to have a ¬†default where it just looks in the images directory for the following files…

    smalllogo.png
    logo.png
    splashlogo.png
    storelogo.png

    Just update those images to what you want, and re-build/deploy.

{ 0 Pingbacks/Trackbacks }

Leave a Reply

Your email address will not be published.

* Copy This Password *

* Type Or Paste Password Here *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">