Discussion Board

Results 1 to 2 of 2
  1. #1
    Registered User
    Join Date
    Jun 2008
    Port Elizabeth, South Africa

    Lightbulb Creating Web App Icons and Favicons

    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.

    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.

    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.


  2. #2
    Nokia Developer Expert
    Join Date
    Jun 2008

    Re: Creating Web App Icons and Favicons

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


Similar Threads

  1. Customize favicons for your web app
    By emx2500 in forum Nokia Asha Web Apps
    Replies: 1
    Last Post: 2011-05-06, 07:51
  2. Including .mbg in .rss - creating icons before resources
    By Faider in forum Symbian Tools & SDKs
    Replies: 1
    Last Post: 2009-06-04, 16:35
  3. Creating icons with PNG image
    By jinuthomas in forum Symbian Media (Closed)
    Replies: 9
    Last Post: 2009-03-20, 18:06
  4. Inkscape for creating svg icons
    By patrickfrei in forum Symbian
    Replies: 2
    Last Post: 2006-12-18, 13:26

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts