I'm close to releasing my second application to the Windows App Store, and have gotten just good enough at dealing with icons -- not a rocket scientist-level task by any stretch -- and thought I'd share.

Buy an icon

First, you need a square png (or other common format) of your icon that's at least 620x620 pixels. You can get a nice rounded image, but for the Windows Store, at least, a full square is better.

In my experience, it's not too difficult to trade a couple weeks of waiting (in case you get a bad contractor) and $5-$15 to get a servicable icon from fiverr.com. I've used folks from Pakistan each time, strangely enough, and gotten very good results three times, most recently with foxsquare. You do need to be respectful to some degree, as their contract says, "We Do NOT Take Order related to Pork, Nudity, Alcohol & Gambling." So far, so good for me.

Here's my latest, a design for a podcast feed creator. I wish the angles on the orange circles were perfectly symmetrical, and that the little "i" icon didn't reach the bottom of the image, but all things considered, this is a heck of a lot better than I could've done in several hours' work. It's a steal at $15 with .psd.

package.appmanifest

To insert the icon into your UWP app, open up your package.appmanifest file from Solution Explorer, and hit the Visual Assets tab.

Now you have a pretty simple interface to upload icon imagery. I recommend clicking on each of the lines from "Square 71x71 Logo" on down.

Resizing your original

For each one, you'll want to upload resized versions of your original icon. "But how do I get those resized images quickly?" you ask? That's easy if you download IrfanView, the handiest image viewer I've ever used.

Can't recall how many years I've used IrfanView now, and I was impressed to learn that it has extensive command line support.

First name the original square.png. Then run a bat file that resizes everything.

Here's the bat file I'm running, though you may have to change to the path where you have IrfanView installed:

"C:\Program Files (x86)\IrfanView\i_view32.exe" .\square.png /resize=(284,284) /aspectratio /resample /convert=.\284.png
"C:\Program Files (x86)\IrfanView\i_view32.exe" .\square.png /resize=(600,600) /aspectratio /resample /convert=.\600.png
"C:\Program Files (x86)\IrfanView\i_view32.exe" .\square.png /resize=(300,300) /aspectratio /resample /convert=.\300.png
"C:\Program Files (x86)\IrfanView\i_view32.exe" .\square.png /resize=(620,620) /aspectratio /resample /convert=.\620.png
"C:\Program Files (x86)\IrfanView\i_view32.exe" .\square.png /resize=(176,176) /aspectratio /resample /convert=.\176.png
"C:\Program Files (x86)\IrfanView\i_view32.exe" .\square.png /resize=(200,200) /aspectratio /resample /convert=.\200.png
"C:\Program Files (x86)\IrfanView\i_view32.exe" .\square.png /resize=(96,96) /aspectratio /resample /convert=.\96.png
"C:\Program Files (x86)\IrfanView\i_view32.exe" .\square.png /resize=(88,88) /aspectratio /resample /convert=.\88.png
"C:\Program Files (x86)\IrfanView\i_view32.exe" .\square.png /resize=(50,50) /aspectratio /resample /convert=.\50.png
"C:\Program Files (x86)\IrfanView\i_view32.exe" .\square.png /resize=(24,24) /aspectratio /resample /convert=.\24.png

pause

Boom. Done.

Now go into the appmanifest UI and click on every largest size available for each asset line, then add your image.

NOTE: Some of these already have placeholder X images in your project. OVERWRITE THEM. You can overwrite in addition to the ones you're uploading to ensure you have decently high quality images.

Rectangle splash and wide logos

This will leave you with just two assets unfilled, both rectangular. One is the "Wide 310x150" and the other the "Splash Screen" logo.

I kinda cop out here. I could probably get fiverr to make me some, but instead I open Ms. Paint.

The size we need is 1240x600. I tell Paint to create a new image, then I hit "resize" (Ctrl-W, strangely enough), and get it to 1240x600.

Make sure "Maintain aspect ratio" isn't checked.

Then I use the paint bucket to fill that all black. Finally, I paste in the 600x600 image IrfanView created and slowly move the middle pixel over until it's at 620 pixels into the image in Paint. Very high tech.

Save it and put into both of the assets you had left.

Voila! The end. Cheap and quick.

Labels: fiverr, howto, images, paint, uwp, windows, windows store