Create a special Windows 8 start screen icon for your website

Back when Windows 7 was released Microsoft introduced an option for webmasters to add tags to their site's code that would make special commands available on the Windows taskbar if users pinned the site on it. According to Microsoft, individual user engagement grew by up to 200% after sites were pinned on the taskbar.

Fast forward to Windows 8 and another option to pin a website. This time, users can pin the website to the start screen of the operating system. It is the area that provides program launching and searching functionality. While it is possible to pin any website to the start screen using Microsoft's Internet Explorer 10 (the Modern UI version), results do not look that good as a default Explorer icon is selected to visualize the site.

It makes sense to create a special start screen icon for your site so that it can easily be identified by users.

Creating the icon

You can create the icon by yourself, or use a Microsoft tool to do so. If you want to create the icon manually make sure you create a 144x144 pixel png image. It is recommended to leave some space at the bottom for the title that is displayed there.

If you do not feel comfortable creating your own icon, use Microsoft's Build My Pinned Site website to do so. While the service does not offer you the same level of customization as creating the start screen icon manually, it can be a viable option to get the code for your site out there as soon as possible.

It takes two steps to generate the code for your site. Upload an image in the first step, and select the title and background color that you want to use. The image is automatically displayed as a preview on the same page so that you know how it looks like on the start screen. You can't move the image around, and larger images do not really work here that well. What you want to use is a smaller sized image, up to 100x100 or so instead.

When you have found the right color, title and image, click on the let me see the code button to generate the code for your site.

The code that you need to add to the head area of your website consists of three meta tags, one for each value (image, title and background color).

<meta name="application-name" content="Ghacks News"/>
<meta name="msapplication-TileColor" content="#ffffff"/>
<meta name="msapplication-TileImage" content="image.png"/>

Note that you also need to download the processed image, the image download is provided once you hit on the code generation button, and upload it to the root directory of your server so that it is automatically picked up by the operating system when the site gets pinned by a user.

I suggest you test the implementation immediately after you have added the code to your website and uploaded the image to the server. You may need to clear the cache of your website and the web browser before the new pinned image becomes available.

If you get a white icon, it either means that the system can't find the image that you have uploaded, or that there is a caching issue that you need to resolve.

Advertisement