Implementing icons for apps on different platforms is a pain, and that's without even considering designing the icons and drawing the graphics. Different platforms have different app styles and sizes, so you've got a lot to consider if you want to support multiple platforms with your app. This article provides useful tips on implementing app icons, including different sizes needed for different platforms (such as Firefox OS), and implementation specifics. We won't provide icon graphic design information, but we will link to suitable resources for each platform.
TBD
Mozilla's Firefox OS platform is one of the simplest to support in terms of icons. This section explains why these sizes are needed in detail, and provides a table of the specific icon sizes shipped with release phones.
Note: For more information on the actual design of Firefox OS icons, read the Firefox OS app icon design guidelines. They can be square or round, as stated in the guidelines.
Firefox OS icons need to be in PNG format.
For older Firefox OS device (pre-2.0), the recommendation was a 60 x 60 icon, to use on the homescreen of your device. It was simple back then, as the devices generally had a similar screen size and resolution, and the layout didn't vary much. However, more recently, a number of factors have proven this to be less than ideal:
These factors resulted in icons started to look pixelated on some devices. The Firefox OS UX team considered many different options to resolve this, including SVG icons, multiple device icon requirements, and a number of different single icon sizes, but in the end the best solution was a single 512 x 512 icon that can be resized as needed for different uses across devices. This is the best solution:
With the 2.0 homescreen design, we wanted to move to larger app icons as one of the tenets of the 2.0 visual refresh is to make things feel more spacious and comfortable to use. As such, we decided to ship a 3 column, large icon version of the homescreen, but still provide users with an option to switch back to the 4 column, small icon layout from Settings.
The icon sizes starting with the 2.0 release across different devices are as follows:
Device name | Physical screen specifications | Screen resolution | Scale factor | Large (3 column homescreen) icon size | Small (4 column homescreen) icon size |
---|---|---|---|---|---|
Most in-market devices | 320x480 HVGA 3.5” | 165ppi | 1x | 84px | 64px |
Helix (Huawei) or ZTE Open C | 480x800 WVGA 4.0” | 233ppi | 1.5x | 126px | 96px |
Flame reference device | 480x854 FWVGA 4.5” | 218ppi | 1.5x | 126px | 96px |
4.5" @ qHD | 540x960 qHD 4.5” | 245ppi | 2x | 142px | 108px |
4.7" @ 720p | 720x1280 720p 4.7” | 312ppi | 2.25x | 189px | 144px |
5.0" @ 1080p | 1080x1920 1080p 5” | 440ppi | 3.375x | 284px | 216px |
For the 320 x 480 screen, the base sizes of 84 x 84 for 3 column mode, and 64 x 64 for 4 column mode were chosen to maximize icon size while balancing the icon density and wallpaper visibility needs. Icon sizes for all other screens are calculated by multiplying by the relevant scale factor. For example, on Flame it is 1.5 (scale factor) x 84 = 126 (large icons) and 1.5 (scale factor) x 64 = 96 (small icons).
The Firefox Marketplace still requires a 128 x 128 icon, for display on app marketplace listing pages.
You specify the path to the icons in the icon field of the app manifest, and multiple icons can be pointed to like this:
"icons": { "512": "/img/icon-512.png", "128": "/img/icon-128.png" }
You can also use a 64 bit encoded Data URI directly in the manifest file to provide the icon and cut down on HTTP requests:
"icons": { "512": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAIAAAAlC ... " }
We have cut the above example down for the sake of brevity.
Note that you don't need to just include 512 x 512 and 128 x 128 with your app: you can happily include further specific icon sizes if you want to provide a tailored look for each different required size — you can simply include more icon lines in the manifest icon field shown above.
Android, iOS, Windows, Tizen, etc.
It would be good to cover icon requirements for different ecosystems.