Posted by Drew Estelle on Jun 27, 2018 3:08:44 PM
DIY: Designing Your Store's Mobile App Icon
App icons. Every phone is filled with them. If you’re contemplating trying out your very own mobile app, you will have to create one of your own to stand out from the crowd. But don't get overwhelmed. We put together a list of considerations to accomplish this.
App icons and logos are not the same thing
They both are a powerful representation of your brand. However, there are some distinctions.
Logos are images that are scalable. They are a much bigger representation of your business. Think of logos as the bigger picture.
Target's recognizable and distinct logo
An icon is an artistic summary of your logo. It is more of a snapshot. It still needs to remain well thought out and iconic since it will sit amongst the rest of your customer’s apps. Usually icons are designed quadratically and scale within specific dimensions.
Target's icon is a perfect summary of their logo
Knowing this distinction will help you with your app icon design. Logos don't do well in icon designs. They look cluttered and squashed within their square confinements. You want your app icon to look clean and recognizable for your customers, so get creative! Find a way to make an icon from your logo.
Mobile App Icon Scalability
Your icon is going to show up in various places on customer devices. It needs to remain attractive and legible across all sizes. For example, in Settings and Notifications the app icons show up as small as 38x38. Scaling your icon to this size is a good test to see if your icon still is clear and recognizable. Imagine standing far away from your logo. Can you still recognize what you see?
Mobile App Icon Design
Use text only when it's an essential or part of a logo. Your app's name is going to appear just under the icon. Your icon is too small of a space to include very much, so use it wisely. You will notice that some apps have initials or one letter that represents their brand name. That is fine if it represents your brand, but you do not need to include nonessential words. Embrace simplicity.
When choosing your colors, try to pick 2 of your brand's colors that compliment each other. If not, choose a white or black to accompany your primary brand color.
Vogue's app icon is classic, sleek, and minimalist.
Follow specific dimension guidelines
iOS and Android do not have the same dimensions required of their app icons. Furthermore, they both have different sized devices that the icon must be optimized for. It’s good to make a spec sheet of your icons for both.
Formatting Your App Icon
Both Android and iOS require the icon be saved in .png form. However, .png doesn't always exactly provide a clear image. One way to bypass this is to create a vector image. Vector images are scalable without losing quality. There are lots of free web applications that can help you vectorize your icon. For Apple, you will have to convert your file into a PDF. For Android, you can import the SVG file.
iOS App Icon Standards
Here is a list of the different sizes for the different Apple devices your icon will need to be optimized for. The first step is creating your app launcher icon.
|iPad, iPad Mini||
You will also be required to make a set for Spotlight, Settings, and Notification icons.
iOS Spotlight Icon Size
|Device||Spotlight icon size|
|iPhone||120px x 120px|
|80px x 80px|
|iPad Pro, iPad,
iOS Settings Icon Size
|Device||Settings icon size|
|iPhone||87px x 87px|
|58px x 58px|
|iPad Pro, iPad,
iOS Notification Icon Size
|Device||Notification icon size|
|iPhone||60px × 60px|
|iPad Pro, iPad,
To learn more, read Apple's app design guidelines.
Android App Icon Standards
All Android icons follow the same scaling rules. When creating your icon files, you must make 5 versions.
Standard Android App Icon Sizes
|App launcher icons||48px x 48px|
|Action bar icons||32px x 32px|
|Small/contextual icons||16px x 16px|
|Notification Icons||24px x 24px|
To learn more, read Android's app design guidelines.
Android App Icon Shape
Your icons can be square or round for Android. However, we recommend choosing square so that your app can maintain consistency on both Android and Apple. For Apple, you do not have to manually apply rounded corners on your icon. Submit a square icon. Their system applies a mask that rounds icon corners automatically.
By following our design guidelines, applying the right formatting, and a little creativity, anyone create their own mobile app icon. If the idea of doing this all yourself makes you nervous, no worries. You can always call for help. Our friends at Socianado can give you a hand.