Icon implementation for apps

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.

Firefox OS

Mozilla's Firefox OS platform is one of the simplest to support in terms of icons. The minimum you should provide is a 60 px icon for display on the device, plus the Firefox Marketplace recommends that you also provide another size — at least 128px — for display on the marketplace pages, etc. 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": {
  "60": "/img/icon-60.png",
  "128": "/img/icon-128.png"
}

Note that you can provide a 64 bit encoded Data URI directly in the manifest file to provide the icon and cut down on HTTP requests:

"icons": {
  "60": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAIAAAAlC ... "
}

I have cut the above example down for the sake of brevity.

for more information on the actual design of Firefox OS icons, read the Firefox OS app icon design guidelines.

Android

iOS

Windows

Tizen

etc.

Document Tags and Contributors

Contributors to this page: chrisdavidmills
Last updated by: chrisdavidmills,