Windows Store tiles and logos done right

Windows Store tiles and logos done right

Tiles are the most important piece of art your Windows Store app has, so you should get them right. Note that this post is just about basic, static tiles, not the dynamic ones. Here are the principles:

Do not ship a lame tile.

Supply a Wide Logo (again, if your art is not lame)

Get your colors right

Do not ship lame tiles and logos

Your tile art, particularly your 50x50 pixel Store Logo, is your most important art. You need something that looks awesome at different sizes, most importantly at 50x50. If you’re an indie developer, you are probably not a good artist and so you should hire one. Try freelancer websites like elance.com and guru.com. You should be able to get a great logo for a few hundred bucks or less.

At the time of writing this, you’ll need sizes of 30x30, 50x50, 150x150, and 310x150.

I like to use actual drawings for my games like the one below and then use simple cropping to get it into all the correct sizes.

It can be tough to use these at very small sizes (e.g. 50x50), so you may do like a lot of people and use abstract logos that scale nicely.

Swap all default art and supply a wide logo if it is not lame

By default, you do *not* have a WideLogo.png included with your app. In most cases, you should set all the logos you can. Here’s how you do this in Visual studio:

Go to your Assets folder inside your project and replace all the placeholder art with your own of the appropriate size. Also, create a version of your art in the Assets folder called WideLogo.png that is 310x150 and include it in your project.

Confirm that all the paths to your art are correct. Here’s how you do it in Visual Studio:

1. Open Package.appxmanifest from Solution Explorer2. If it's not already open, click on the Application UI tab

3. Confirm all your assets. Remember to set your Wide Logo that you created in the first step.

The reason Visual Studio does not have placeholder art for the wide logo in new projects is because Microsoft does not recommend wide logos for all apps. Here is the quote: “Use the wide tile only if your app has new and interesting content to display to the user, and the notifications that deliver that content are sent frequently (weekly at the very least). Wide tile content is meant to be fresh and "alive". Have a good reason to take up the extra space.”

True, but there are tiles on your Start Screen by default that aren’t alive (e.g. the Desktop, and several others). Also, the user can switch your icon on the Start Screen to the 150x150 version easily. So, preferably your wide logo is “alive”, but at least don’t let it be lame. No one wants to see a big, crappy icon on their start screen!

Note: I don’t see any way to have the 150x150 logo show by default if you supply the wide logo, rather the wide logo will be shown on the Start Screen by default. I’m not sure why you’d want to do this since, if you offer a wide logo, presumably you’re proud of it, but thought I’d mention it.

4. Click on the Packaging tab and confirm that you are pointing to your StoreLogo.png.

Get your tile colors right

You can set the Foreground text and Background color of your tile in the manifest.

Personally, I use two rules for this:

Use a combo that has strong contrast, in other words, use a dark color for one and a bright color for the other. For the foreground color, you only have the choice of Light or Dark, so not much choice there, but you have a lot of choice for background color which leads me to my second rule.

Use a less common background color. In the Store, when you see your tile in a grid with dozens of other tiles, you want yours to draw the attention of the user (see below). Black and gray seem to be really popular choices among the masses of devs out there, so I recommend something else. As an experiment, go up on the Store and look at the new releases. See a bunch of black and gray tiles? That’s because a lot of these folks are just doing the default. Now, take a look at the top games or apps. Notice a bigger variety of colors? Yeah, that’s because successful developers sweat these simple details. Maybe a bright color like Orange or Gold?

See, mine are the obnoxious colors—the orangish and the neon green. :) Ugly? Maybe a little, but at least I see it.

Writer profile and disclaimer

Sam Landstrom is an individual writer for MSDN and the comments in this post do not necessarily reflect the opinions of Microsoft as a whole.