./Design

Creating Icons For Multiple Devices

I thought I’d write a quick post about icons for the various device platforms that you can target with the Flash Platform as there are a lot of different sizes to take into consideration when creating your game or app icon. Below are two simple tables with the various icons per platform with their respective sizes:

For iOS you have 5 icons: three are for iPhone and iPod, one is iPad specific, and the other is for the App Store. The image below only shows four out of the five as the fifth is 512×512 pixels and would fill most of the screen. That 512×512 icon is used for the App Store. The four shown below are used by the application or game on the device itself. The 57×57 is the main application icon, with the 114×114 being used as a high resolution alternative. The 29×29 is for use as a smaller application alternative, and finally the 72×72 icon is for the iPad (although the 114×114 icon can be used as an alternative).

On Android and BlackBerry PlayBook the requirements are slightly different. On Android there are only 3 icons: 36×36, 48×48, and 72×72. The device and available screen resolution determine which of these icons are used. On the BlackBerry PlayBook you only supply one icon size (although until official launch this went through numerous size changes). As it currently stands, the default application icon size for PlayBook is 86×86.

While the examples shown here have curved corners you don’t have to produce curved cornered icons if you don’t wish to. On iOS it will automatically round the corners for you if your icons are square. On Android and BlackBerry PlayBook you can define the shape of your icon as you see fit and include transparency if you wish to have no rectilinear icons.

This is just a quick guide of what can be produced for the various device platforms. However, each platform has documentation that goes in to greater detail on how to design icons for that specific platform and I recommend that you check each one out to get a better understanding of their individual requirements, (I’ve put the links below). I’ve also uploaded the actual PSD used to create the icons you can see, so feel free to grab it and have an experiment.

Discussion

6 comments for “Creating Icons For Multiple Devices”

  1. iOS、Android、BlackBerry PlayBook のアイコンガイドラインのリンクも張ってました。Creating Icons For Multiple Devices Mike Jones http://is.gd/T0ciSL

    Posted by tokufxug (Sadao Tokuyama) | June 21, 2011, 22:43
  2. hi,

    great info. I just wanted to point out couple of tools which I developed. These allow easily make icons for BlackBerry PlayBook and svg-tiny icons for Symbian OS.

    1- http://www.orison.biz/apps/playbook-icon-maker/
    2- http://www.orison.biz/apps/svg-icon-maker/

    I hope you like them :)

    // chall3ng3r //

    Posted by chall3ng3r | July 6, 2011, 00:31
  3. http://blog.flashgen.com/2011/06/20/creating-icons-for-multiple-devices/ creating icons for multiple devices #ios #Android #bb

    Posted by NoTengoQueHacer (David) | July 6, 2011, 01:15
  4. Very cool – I like them. Nice work :)

    Posted by Mike Jones | July 6, 2011, 11:35
  5. Thanks Mike :)

    // chall3ng3r //

    Posted by chall3ng3r | July 6, 2011, 20:26
  6. […] 안드로이드, 블랙베리, iOS 그리고 다양한 플랫폼에 아이콘을 만드는 방법 : Creating Icons For Multiple Devices […]

    Posted by Flash Builder 4.5.1를 이용한 애플리케이션 개발(Android & iOS & BlackBerry) | shift-k | March 29, 2012, 00:56

Post a comment