I just saw this interesting article about Google's new Windows Phone 7 homepage on wpcentral.com where it showed how you can add a custom tile to your home page for their website. I thought that's pretty cool, but wondered how they did it.
First, I logged into my server and tailed the web server log, loaded up my website on my WP7 phone, pinned the page to the home screen using the bottom menu and checked the logs to see if it was re-requesting an iPhone like apple-touch-icon. Nope. Doing a little searching, found several forum entries within the past month or so all asking if this was possible with the answer being "no".
Hmm, so how did the Goog make a tile icon?!
So next, I spoofed my phone's browser and curled Google's home page to see what it showed - maybe there was some API or something you could call or a meta-tag that the rest of us don't know about. There isn't - it's actually a lot simpler than that. If you look at the screen captures above, you'll see that WPCentral showed the steps you have to take to add an icon: You click the button on the home page, then you see a blue screen with a logo and instructions to then use the menu to pin a tile.
The key is that Google is using an SVG image file on that page! You can see it here:
<div style="background-color: rgb(17, 85, 204); height: 110%; width: 100%; top: 0px; left: 0px; position: absolute; color: rgb(255, 255, 255); "> <div style="width:320px;height:320px;margin-top:10px"> <object data="//gstatic.com/m/images/wp7_promo/gText2.svg" height="100%" type="image/svg+xml" width="100%"></object> </div> <div style="height:110px;margin-top:40px;position:relative;width:210px"> <div style="font-size:20px;line-height:30px;margin-left:10px;text-align:right"> <span>Tap <b>...</b></span><br><span>Select '<b>pin to start</b>'</span> </div> <div style="height:100px;position:absolute;right:-105px;top:16px;width:100px"> <img src="//gstatic.com/m/images/wp7_promo/sketch_arrow.gif" alt="arrow" height="100%" width="100%"> </div> </div> </div>
Very cool. I'll have to hack up something similar for my own site.