Add a custom icon to your (mobile) app

The devil is in the details. I found this very, very true when doing something as simple as adding a custom icon to a mobile app. This post describes to add a custom icon to a mobile app but the majority of the points are just as well applicable to a full Windows app.

The Designed for Windows Mobile logo requirements state that an app includes at least two icons: a 16*16 and a 32*32. The larger one is used to display the (required) shortcut in the programs folder, the small one is used in the running programs list, the first item in the PDA’s windows menu. (This list does not show in an emulator) . To look well these icons need a transparent background, especially the taskbar looks bad when the background is solid.

You can create your icons in VS. The icon editor has a color palette, in the top left hand is a small monitor image. All pixels drawn in this color will be rendered transparent.

Here the icon has the dark-bluish background, in a folder it will be white and in the task bar it will be a blue or red gradient, depending on the user’s theme.

There are several ways to include the icon in the app. The most costly one is to include it as an embedded resource in every form of the application. The icon is a property of a form, you can set it from the property window and edit it in the resx file (which shows up in the solution explorer after selecting “show all files”). Including it in every form makes sense when every form should display it’s own icon, but is a waste of (costly mobile) resources in every other scenario. This was another optimization we did in our “from WTF to logo” app. The easiest way to assign the icon is to set it in the application tab of the app’s property pages. When building the app the icon will be embedded. There is no need to include the ico file itself when deploying the app.

There is one final gotcha which did cost me a lot of hair. When installing the updated app on the device, even after a full un-install of the previous version, the application will still display the old icon. It is preserved somewhere in a cache, to see the updated icon you have to reboot the device. I wish I had known that in advance.

This entry was posted in Mobile. Bookmark the permalink. Follow any comments here with the RSS feed for this post.
  • Brian

    Thank you so much for the last bit about restarting the device! Spent waaaay too much time trying to determine why my new icon wasn’t being displayed!