Russell Beattie

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:

http://www.gstatic.com/m/images/wp7_promo/gText2.svg

And in fact, it's not even a separate page - Google just uses Javascript to create a full-screen sized div element colored blue, and embeds the SVG. When you then pin the tile to the front page, Windows Phone 7 takes a screen shot of the top part of the page (cutting off the instructions, conveniently enough), creating the tile 'icon' which resizes cleanly because it's a vector graphic (as opposed to a gif or jpg which could become fuzzy when shrunk.)

Very clever!

Nice job Google. Too bad that simple hack is embedded in literally 10,000 lines of Javascript. (So. Insane.) In case you're curious, here's the embedded 'page' that is created to create the tile, overlaid on top of the home page dynamically:

<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.

:-)

-Russ