How-to: Make custom Windows 8 Metro tiles for your websites

blibbi

Honorable
Feb 13, 2013
2
0
10,510
How-to: Make custom Windows 8 Metro tiles for your websites

A typical Windows 8 Metro desktop looks something like this.

8433529555_93a5e83bd5_z.jpg


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.

8471873520_d15b41090b_o.jpg


To do this, I go here: http://www.buildmypinnedsite.com/

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
Code:
<head>
tag:

Code:
<meta name="application-name" content="Waikiki Gun Club" />
<meta name="msapplication-TileColor" content="#868696" />
<meta name="msapplication-TileImage" content="http://www.waikikigunclub.com/bb/styles/Attriuum/template/wgc_metro_tile.png" />

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:

1)
Go to /cpanel, click on Style tab.
Click on Templates in the left column
Then next to your template name click Edit.
Select overall_header.html
paste under the head tag:

Code:
<meta name="application-name" content="Waikiki Gun Club" />
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="http://www.waikikigunclub.com/bb/styles/Attriuum/template/wgc_metro_tile.png" />

Note that you can use whatever background color you want. It doesn't have to be #FFFFFF. I just use white because it makes my own custom tiles really easy to recognize, and I like white backgrounds.

2) Go to Templates again and click on Refresh in the right column for the template you just edited.

3) Up above, click on the General tab, and find the Purge the cache button and do that.

Here are the actual png files.

8433532279_aecf76d6fc_o.png


8434618466_1e75a9671b_o.png