HTML5 Zone is brought to you in partnership with:

G. Andrew Duthie, aka devhammer, is a Technical Evangelist for Microsoft's Mid-Atlantic States district, where he provides support and education for developers working with the Microsoft development platform. In addition to his work with Microsoft, Andrew is the author of several books on ASP.NET and web development, and has spoken at numerous industry conferences from VSLive! and ASP.NET Connections, to Microsoft's Professional Developer Conference (PDC) and Tech-Ed. G. Andrew is a DZone MVB and is not an employee of DZone and has posted 41 posts at DZone. You can read more from them at their website. View Full User Profile

Creating Your Windows 8 Store Logo

11.27.2012
| 3362 views |
  • submit to reddit

If you've spent any time at all browsing the Windows Store, you may have noticed that there are more than a few apps that show up with the default store logo, which is a simple box with an X through it. The default logo included with the Visual Studio  project templates is intended to look unfinished, so that developers will hopefully replace this logo with one that's appropriately branded for their app. Here's what one of these apps looks like (I've obscured the name of the app to avoid embarrassing the developer):

image

Notice that the app doesn't have a great rating. Not necessarily a direct result of not having a nice store logo, but it doesn't leave a great impression with potential customers.

Unfortunately, while the fields for most of the app's graphics, including the tile, wide tile, and splash screen, are found on the first tab of the manifest editor (as shown below), the store logo field is on the last tab (packaging), so some developers may miss this and end up submitting their app with the default store logo. I've advised pretty much every developer I talk to that they need to replace these logos with their own, but I missed that key piece of information until recently, because in the case of my app, I simply edited the existing store logo file, rather than substituting my own image as a separate file.

How Do I Fix It?

There are two ways that you can ensure that you have a custom store logo with appropriate branding for your app:

  1. Directly edit the file "images\storelogo.png" from your project. This is the path that is included by default for JavaScript apps (for C# apps, it's "Assets\StoreLogo.png"). By editing the file directly, you don't need to worry about whether or not the path is correct. TIP: If you want your chosen background color to show through, make sure to save the file as a transparent PNG. I typically use Paint.NET for editing and saving image files...it's donation-ware, and easy to use.
  2. Create your store logo file using your preferred editor (must be 50x50 pixels), and then open the app manifest and go to the Packaging tab, and use the browse (ellipsis) button to browse to the location of your new logo file (should be in your project), and save the changes:


image

Of course, you should also double-check to make sure that you've updated all of the image fields on the Application UI tab, and once you've done so, you should be all set with all the necessary branding to make sure your app looks great in the store!

Generation App

Do you have a great idea, and want help turning it into a great app? Want more great tips, tutorials, and documentation on building apps for the Windows Store? Then you should register for Generation App. The Generation App program includes a 4-week process to get you from idea to app, including links to all the right documentation, tips, videos, and more. You can also access 1:1 phone support to talk with a Microsoft engineer about technical or design questions you may have. So sign up today!

Published at DZone with permission of G. Andrew Duthie, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)