Tech Note 09: Creating Launcher Icons

Dec 07, 2009

© NSB Corporation. All rights reserved.

Introduction

S60 and UIQ devices each use completely different methods to produce icons. This Tech Note walks you through the steps of producing icons for each platform.

The pathnames to your icons are set up in the Project Properties of your app. If you do not specify an icon, NS Basic/Symbian OS will use a generic one. If you do not see the new icon when you install an update of your app, try turning the phone off and on.

Here is how to create the icon files:

S60 Icons

S60 device icons are in a proprietary format called MIF (Multi Icon Format). It's a very efficient format, but not easy to make. MIF files can only be created from SVG-T (Scaled Vector Graphics - Tiny) files. This conversion is built into NS Basic/Symbian OS, but you need to produce the SVG-T file somehow. There are 3 ways to do this:

  1. The easiest way is to buy Adobe Illustrator to draw icons and save in SVG-Tiny format. It's expensive ($599 USD!) but it will save you a lot of time. It includes a feature that will convert a photo to an SVG line drawing with color fills.

  2. You can download a free editor named Inkscape. Inkscape saves to SVG format but not SVG-T. Nokia has a utility to convert to SVG-T, but only a subset of the full SVG format is supported. Start with a very simple image such as a box, then build up from there. Pasting a BMP into InkScape does not work, but saving an eps as a .pdf, then importing it into InkScape works.

    To convert the SVG file to SVG-T, use the SVGBinEncode.exe utility, installed as part of the S60 SDK (455 megs, downloadable from the Nokia web site). The file extension should be .svg, not .svgt. This utility is also installed with NS Basic into \Program Files\nsbasic\symbian\buildtools\Nokia.

    There is also a free web based utility to convert jpg to svg files. If the utility returns a php file, trim off the text before "<svg" and save it as a .svg file.

  3. You can type an SVG file into a text editor. It's XML syntax. This is probably only useful for trivial cases.
Once you have the SVG-T file, enter it into the Launcher Icon field in your Project Properties.

If the device does not show your new icon after installation, turn the device off and on. The icons get cached, so a changed icon will not appear automatically.

Additional notes from users...

If you want to create icon for your S60, follow these steps...

  1. Download software SvgFactory (free)
  2. You can create 64 X 64 and save in .bmp format.
  3. Use SvgFactory convert to svg format.
  4. After convert, rename to LauncherIcon.svg
  5. Copy and paste to overwrite LauncherIcon.svg in
    "C:\Program Files\NSBasic\Symbian\BuildTools"
  6. You compile and install see the result.
I have checked this out and can confirm it is not only a lot easier but seems to produce a better, sharper icon on my Nokia 5800. There are a couple of changes I would recommend though: So I suggest the Technote is changed to show this procedure:
  1. Load your JPG or BMP image in any image editor and copy to clipboard.
  2. Run SVGFactory and select Edit > Paste. Save the resulting SVG file in your Project Directory.
  3. Point the 'Launch Icon S60' property of your Project to the SVG file.

UIQ Icons

UIQ also has their own format, called MBM (Multi Bit Map). The icons are created from standard Windows .bmp files. The icons must be provided in 3 sizes: 18x18, 40x40 and 64x64. Icons should be in 8 bit color format.

Name the bitmaps Filename18.bmp, Filename40.bmp and Filename64.bmp. In Project Properties, enter Filename.bmp, without the bitmap size.