Designing an App Icon on an empty white page makes it difficult to see how it will look when found on the App Store or Google Play. You want your icon to stand out amongst the sea of colours and badges so that users are interested enough to take a closer look.
The following template has been designed for iOS 11 and Android O icons. App icons are stored edited as sketch symbols which automatically update on the preview templates, so you only need to change one artboard to see your changes across all devices and app stores.
The first page of the template allows you to design the Icons for Android and iOS at the maximum recommended resolution (512x512 for iOS and 1024x1024 for Android). It also includes additional sizes recommended by Apple and Google.
For iOS this is quite straightforward. Size are:
- Play Store - 512x512
- xxxhdpi - 192x192
- xxhdpi - 144x144
- xhdpi - 96x96
- hdpi - 72x72
- mdpi - 48x48
iOS icons are a considerably more exhaustive, with different sizes for iPhone and iPad icons, including Settings Screen, Spotlight Search and Notification icons:
- App Store - 1024x1024
- iPhone 3x - 180x180
- iPhone 2x - 152x152
- iPad 3x - 167x167
- iPad 2x - 152x152
- iPhone/iPad Settings 3x - 87x87
- iPhone/iPad Settings 2x - 58x58
- Spotlight - 80x80
- Notifications - 40x40
Its also worth noting that all iOS icons are masked as rounded-squares (NOT squircles anymore) when they are displayed on the App Store. For the large iOS icon the corner radius is 120 for dimensions 1024x1024. Scale this accordingly for other icon sizes.
App Store Previews
The second page of the template shows previews for:
- Google Play on Phone
- Google Play on Web Browser
- iOS App Store on Phone
- iOS App Store on iTunes (desktop)
The icons on the previous page are symbols that automatically update on the app-store previews when you make changes. You can also change the name and category on the previews to your own app.
The example demonstrates how you might design the same icon in both Android and iOS styles, with Android favouring flat colours and long-shadows, while iOS icons typically use few shadows and colourful gradients. These are of course just guidelines that both companies frequently break with their own designs, so its important to be creative if you want to stand out.
You can get the template here from Sketch App Sources:
—— Tom 2017.09