02-15-2011 09:31 AM
I designed a icon 64x64 in size for my multi BB device application. It looks good on my bold but is def degraded in the Curve 9300 -> rounded corners look very flat and pixelated.
I downgraded to 32x32 on bold but it looks bad - what is the ideal resolution for multi device icon and is there any tricks i can employ.
Anyone dealt with this issue before?
Solved! Go to Solution.
02-15-2011 12:22 PM
There is no universal icon size that looks good on multiple devices (atleast from my experience). But you can set application icon size based on Home Screen resolution. These two article may be of some help to you.
02-15-2011 12:24 PM - edited 02-15-2011 12:25 PM
Ha... good luck with this.
I ran into this issue with the last app we made. There is no concise RIM document on the issue. They have conflicting, or at least convoluted, documentation on what's correct.
From my experience, different devices behave differently with icons.
Some devices crop the transparent border, so if you have an indicator that protrudes from the regular icon (and into the transparent border), some devices will shrink the icon to fit, using the indicator as the outter most dimentions.
For example, if your icon is 80x80 including a 20 pixel transparent border, your icon graphic is actually only a 60x60 image. This is usually fine, unless you try to add badge that protudes by 5px on the top and the side. You graphic is now actually 65x65. Most devices don't have an issue with this. However, some devices, generally OS<5.0, will crop the transparent border and shrink your 65x65 to 60x60 so that when your badge icon appears, the icon also appears to shrink. This is not a good look.
At this point, I'm focusing on OS 5.0+ devices only, which makes things a little bit easier. To be (relatively) safe, you can use a 73x73 with some transparent, negative border space and nothing protruding out of the graphic into the transparent space. That includes drop shadows, badges, glows, etc. Lame, I know.
Here's some more info on icons:
Good luck. Let me know if you find out something new!
02-15-2011 12:57 PM - edited 02-15-2011 12:58 PM
It's tough if you want perfect quality, because there are so many different sizes, aspects, and themes. For example, on OS6 you're expected to keep the icon itself smaller in the image, leaving a good transparent margin. But then that looks too small on an OS 4.5 device.
Using just the highest icon size ever used on any device (80x80) and letting it self-scale, in my experience looks terrible on devices with sizes in the 70's. You could embed a higher-resolution image, such as the 480x480 reference image that App World uses, and then scale it yourself, but that adds size to the app. Same problem if you embed multiple icon sizes, so to both keep the size down and have it perfect, you would have to create a separate version for every icon size -- not worth it IMO.
To me the best solution is either have the app render its own icon, or use a 73x73 bitmap with about a 15% transparent border (icon itself about 85% of bitmap size). That seems to look "good enough" on everything, while still allowing relatively small app size. The idea is, it's not supposed to scale up on 80x80 devices because it's within 10% of the correct size, but that 10% size reduction actually lets it fit into the container better. Then, on devices with 73x73 or 73x72 with no container, it looks fine, and the scaling ratio on 4.5 doesn't molest the image too much, and the size again is about right. On OS6 it might look a little big, but not too big.
For banner indicators, since OS6 I've made them all 22x22 with the icon using the entire bitmap, and that seems to look OK on everything.
02-17-2011 07:09 AM - edited 02-17-2011 07:15 AM
Great guys, really good responses, il take this forward.
I have a target audiance with all possible devices (up to 4 years old) but because i didnt have icons with graphics prodtruding the general icon background i decided, as generally pointed to above, to simply create '1 size fits all'.
68x68 transparent background with 55x55 icon and 6pxl rounded corners.
My customer was disappointed but understood - ideally they wanted the fancy and slick 'wire frame' styling of the 1st party antice App icons..... not to be!