Sunday, March 2, 2014

Creating right mobile icons sizes for Android, iOS and Windows applications.

I am developing a mobile application that will serve all Egyptians people for a critical national project.

It a service and management based mobile application which is related to Fuel locations finder and Customers fuel subsidy management card System.

It will be released soon by the middle of March in Google play for Android platform and by the end of March 2014 in Apple App Store for iOS application, followed by windows mobile platform in May 2014.

It is a hybrid mobile development rather than native development.

While designing the application I have faced many challenges performance, design, Architecture, cross-platform development, and Graphics especially the logo design. Designing icons especially for iOS platforms is a tricky a little bit.

There are different icons sizes related to resolution (normal and Retina’s displays), places, and naming conventions for applications targeting iOS 3, 4, 6, and 7.

However, it was easier developing the icons for Android platform, but anyway I will share icons sizes for both platforms. and Microsoft Windows mobile platform as well.

It is a good idea and practice to develop

the larger icon size first then export it to different sizes. I used Adobe Photoshop and Illustrator CC. Illustrator is a great tool for logos because it is vector based, so scaling the artwork are easier to scale without losing the artwork resolution.

Android platform

The following table show different icons for different displays resolutions in pixel:


Display


Launcher Icons


Action Bar Icons


Google Play


512x512


---


Double Extra High dpi (xhdpi)


---


96x96


Extra High dpi (xhdpi)


96x96


64x64


High dpi (hdpi)


72x72


48x48


Medium dpi (mdpi)


48x48


36x36


Low dpi (ldpi)


36x36


---

iOS platform

The following table shows different icons for different iDevices displays resolutions in pixel, note that iOS 7 iPhone and iPod has Retina's display support only, as all iOS 7 supported iDevices are iPhone from 4 to 5s, and 5th generation iPod touch.


OS/ Device/ Place


Standard Resolution


High Resolution (Retina Display)


iPhone and iPod Touch


iPad


iPhone and iPod Touch


iPad


iOS 6 platform


Home Screen Icon


57x57


72x72


114x114


144x144


Settings Icon


29x29


29x29


58x58


58x58


Spotlight Icon


29x29


100x100


58x58


50x50


App icon for the App Stores


1024x1024


512x512


1024x1024


1024x1024


iOS 7 platform


Home Screen Icon


---


76x76


120x120


152x152


Settings Icon


---


29x29


58x58


58x58


Spotlight Icon


---


80x80


80x80


40x40


App icon for the App Stores


---


512x512


1024x1024


1024x1024

Windows Phone

The following table shows different resolutions in pixel for Microsoft windows platform application and marketplace icons:


Application Place


Icon Size


Application


Icon


62x62


Tile Image


173x173


Marketplace


Application icon for Windows Phone Marketplace catalog (small)


99x99


Application icon for Windows Phone Marketplace catalog (large)


173x173


Desktop application icon for Windows Phone Marketplace catalog


200x200