In my previous post on Getting Started with widgets I showed how easily you can create a Windows Mobile widget. However, what you would have noticed when you installed the widget is that it uses the default widget icon both during installation and on the start menu (see below). Whilst it’s not a bad icon, it doesn’t advertise your application or company brand. As such it’s recommended that you supply your own icon.
To do this you need to supply an icon file in two formats. For Windows Mobile Professional devices (ie touch screens) you need to supply a 90×90 png image. For Windows Mobile standard you need to supply an ico file that includes images at 44×44, 22×22 at both 32 and 8 bit colour.
Here’s the step by step instructions for creating and including icons for your widget.
- Start with a regular image and use a image editing tool to resize the image to 90×90. I typically use Paint.NET which is a free tool that supports a wide range of image formats. If your image isn’t square you will need to crop/resize the image canvas to make it square.
- With the image resized, simply save it as a png file, icon.png, into the same folder as you widget config.xml file.
(note that the black background indicates that the transparent area of the image – use transparency where possible so that you can see the background of the start menu behind your application icon)
- Next, to build the ico file you will need to scale your icon to the different formats required to be contained within the ico file. For this I use another free tool, IcoFX.
- Open IcoFX
- Insert the original 90×90 image: File > Import Image, select your image, specify the size and resolution to import the image at. I recommend importing the original at the original size (ie 90×90). Doing this will not affect how it renders on the device since ico files can contain images at any resolution.
- Next, add new images for each desired size and bit depth: Icon > New Image, specify size and bit depth.
- Repeat for 44×44 32 bit, 44×44 8 bit, 22×22 32 bit, 22×22 8 bit.
- Save the created ico as icon.ico in the same folder as your config.xml file.
- The last thing to do is to update both the config.xml file and your build files list to include the icon files.
—————–
config.xml
—————–
<?xml version=”1.0″ encoding=”utf-8″ ?>
<widget http://www.w3.org/ns/widgets%22″ mce_href=’http://www.w3.org/ns/widgets”‘>http://www.w3.org/ns/widgets”
id=”http://www.builttoroam.com/hellowidgetworld”
version=”0.1″>
<name>Hello Widget World</name>
<icon src=”icon.png” />
<icon src=”icon.ico” />
<description>This is a sample widget that says Hi to the world!</description>
<author href=”http://www.builttoroam.com” email=”[email protected]”>
Built to Roam Widget Development Team
</author>
<content src=”Main.htm” type=”text/html”/>
</widget>
—————–
Files.txt
—————–
config.xml
Main.htm
icon.ico
icon.png
Now when you run your build batch script and then install the widget on your device you will see your icon displayed both during installation and on the start menu.
Notes:
1) The widget installation screen is not displayed during installation when the widget is downloaded from marketplace. As this is the only sanctioned way to distribute widgets to a Windows Mobile device you don’t need to worry too much about getting the installation screens perfect.
2) If you include both a png and ico file in your widget (and specified in the config.xml file) you will notice that no image is displayed during installation on Windows Mobile standard. This is a known bug but given that this isn’t displayed to the end user (see 1 above) this shouldn’t be an issue.