Creating Web App Icons and Favicons

[sperelson]

When trying to create an icon for your Web App you may want to start out by reading the available guides. Here is my recommended reading order:
Series 40 Web App UX Guidelines
Series 40 Web Apps Publishing Guide
Iconography Style Summary & Series 40 Iconography Guidelines

Let's distill this information down. First, the UX guidelines state that the icon should be a 46x46 pixel icon in a 50x50 pixel bounding box. Personally I find this description a little confusing - it is hard to know exactly what they want. Next, the Publishing guide helpfully dictates a 50x50 pixel PNG file for your icon with no mention of the bounding box. Then the Iconography Style Summary states the actual size of a Series 40 App icon as being 43x43 pixels. Alright then, not sure why there is such a difference there.

I can only assume that the description of a 50x50 pixel PNG is to simplify Web App developer's lives. However, we can go further and follow along with the instructions here so we can end up creating a great looking icon that is tailor-made for Series 40 devices. It is however 43x43 pixels, but it is simple enough to export that image as a 50x50 PNG. However, the icon is not a 46x46 pixel icon inside a 50x50 pixel bounding box - although it is very close.

My guess is that this is good enough. Especially considering that in a previous version of the documentation, the icon size was stated as needing to be 80x80 pixels.

Favicon
My suggestion for the favicon is to base it on your newly made application launch icon by shrinking the canvas of your application's icon while maintaining the icon's detail centered in the shrinking canvas. When the detail of your launcher icon is sufficiently zoomed in then proceed to resize the icon as a 16x16 pixel image and save as your favicon PNG. This gives the favicon more detail even at the smaller 16x16 pixel size.

Summary
Personally, I would prefer the creation of Web App icons to be identical to the Series 40 Launcher icons. It's strange having such a discrepancy as the icon in both cases is only going to be used as the launcher icon on the Series 40 device. Maybe somebody who knows can weigh in and let us know the reasons for this and maybe could validate the method I have outlined for creating an icon for a Web App.

Also, there is no reason to use the Series 40 icon stencils if you don't want to. That was just my suggestion if you wanted something that looked consistent with the Series 40 look and feel.

Regards,
Stephen

[isalento]

Thank you for great feedback Stephen! I'll put this forward to documentation team, so they can sort it out.

Br,
Ilkka