Adding a web page to the home screen of an iOS device uses a screenshot of the page or a web page icon if it’s available. Similarly, adding a web page to a home screen on an Android device uses a generic bookmark icon or a web page icon if it’s available.

However, it’s impossible to set an icon for a web page on the home screen of a Windows Phone 7 device. Instead, the home screen icon is always a screenshot of the current page as-is. The desktop version of Internet Explorer allows developers to create pinned sites. The lack of a comparable feature in the mobile version is curious.

So how does Google make pretty home screen tiles? They don’t, really. They show WP7 users a link to a tile-able page that looks nice when it’s pinned to the home screen. All it does is redirect them back to Google’s home page.

Showing the link to only WP7 users is relatively simple. Either user-agent sniffing or conditional comments will handle that nicely. The pretty page that redirects is the hard part. Fortunately for you, I’ve done all the hard work.

I made a tile-able page for WP7. It handles everything on the client side, so it’s just a static HTML file. You can customize the title, icon, and destination URL with the query string parameters title, icon, and url, respectively.

The first time you visit the page, you’ll see the icon, title, and instructions. The next time you visit the page, it’ll redirect you to the URL you specified. This allows you to load the page on a WP7 device and pin it to your home screen. Every time you tap it on your home screen, it’ll just redirect you.

The page is available as a Gist on GitHub. (The example pages above are for Google, Facebook, and Twitter.)