mozilla
Your Search Results

    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.

    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.
    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:

    Icon sizes across Firefox OS devices from 2.0 onwards
    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.

     

    Document Tags and Contributors

    Contributors to this page: Sheppy, chrisdavidmills, wchang, mauricesvay
    Last updated by: Sheppy,