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.
General icons for web apps
TBD
Firefox OS
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.
Icon format
Firefox OS icons need to be in PNG format.
Icon sizes
Required icon sizes
- 128 x 128
- For display on the Firefox Marketplace and device.
Recommended icon sizes
- 128 x 128
- For display on the Firefox Marketplace and pre-Firefox OS 2.0 devices.
- 512 x 512
- From Firefox 2.0 onwards, larger icons are needed for crisp display on all the different possible combinations of Phone and tablet screen sizes, screen resolutions, and 3 and 4-column layouts. We accept a 512 x 512 icon, which is then scaled for all the different uses across devices. This size is also useful for display on other platforms apps can be installed across, such as Android.
Other icon sizes that might be useful
- 60 x 60
- For the exact on-device icon size on older Firefox OS versions.
- 16 x 16, 32 x 32, 48 x 48, 64 x 64, 90 x 90, 128 x 128 and 256 x 256
- These icon sizes are used on various other platforms your app can be installed on, such as Windows, Mac OS X and Android.
Icon size explanations
512 icon for device display
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:
- Devices are now appearing with a wider range of screen sizes, including not only phones but tablets, and in the near future, TVs.
- Higher resolution devices are starting to appear.
- Firefox OS 2.0+ have multiple homescreen layout configurations available, including 3 and 4 column layouts.
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:
- Requiring a different image file for every icon usage instance would be really inconvenient for developers. 512 x 512 is a fairly standard size in other app store submission processes.
- SVG, despite its superior file size, took significantly more processing to render than a simple image file, which was too much of a performance hit to bear, especially for lower end devices like the Tarako.
- 512 x 512 proved to be big enough for all conceivable uses, while still being a reasonable file size.
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).
128 icon for marketplace
The Firefox Marketplace still requires a 128 x 128 icon, for display on app marketplace listing pages.
Including the icon in your app
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.
Adding more specific icon sizes
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.
Icons in other app ecosystems
Android, iOS, Windows, Tizen, etc.
It would be good to cover icon requirements for different ecosystems.