W8WIL #8: Creating Your Store Logo

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_6

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.
    • Create your store logo file using your preferred editor (must be 50×50 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_8
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][3]. 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][3]!
Code, Community, and Coffee
Built with Hugo
Theme Stack designed by Jimmy