How-to: Make custom Windows 8 Metro tiles for your websites
A typical Windows 8 Metro desktop looks something like this.
Usually when you "Pin" a web page to your Start Screen, it has some groovy little custom graphic on its tile. Otherwise it just has a boring generic "e" thing on it. I wanted to make custom Metro tile graphics for sites I created, so here is how I did that.
Here are two of them, for my sites waikikigunclub.com and blibbi.com, above a generic one for BF3 and a custom one for TomsHardware.
In the second part, "Build your own pinned site," you upload the graphic you want to use, preferably square, and then it gives you back a 144x144px png file which you upload to your site. In step 3, "Get the code," it gives you back something like this, which you paste just under your site's
If you are doing this with a PHPBB3 site, like our waikikigunclub.com site, you could of course edit the template from the site's control panel, rather than editing overall_header.html in a text editor and then uploading it with an ftp app, in which case your full process might be like this:
Go to /cpanel, click on Style tab.
Click on Templates in the left column
Then next to your template name click Edit.
paste under the head tag: