DIY: Designing Your Store's Mobile App Icon

Posted by Drew Estelle on Jun 27, 2018 3:08:44 PM
Drew Estelle

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.

targetlogo

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.

 

targetapp

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. 

vogueicon

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

iPhone with apps displayed
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.

Device Icon size
iPhone
180px × 180px
 
120px × 120px 
iPad Pro
167px × 167px 
iPad, iPad Mini
152px × 152px 
App Store
1024px × 1024px 


 









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, 
iPad mini
80px x 80px

 

iOS Settings Icon Size

Device Settings icon size
iPhone 87px x 87px
  58px x 58px
iPad Pro, iPad, 
iPad mini
58px x 58px

 

iOS Notification Icon Size

Device Notification icon size
iPhone 60px × 60px
 
40px × 40px
iPad Pro, iPad, 
iPad mini
40px × 40px

To learn more, read Apple's app design guidelines.

Android App Icon Standards


Android phone with app icons displayedAll Android icons follow the same scaling rules. When creating your icon files, you must make 5 versions.

Standard Android App Icon Sizes

Purpose Size
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.

 The Takeaway

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.

Topics: Marketing, Technology, DIY, Mobile App

Put your brand in your customer's pockets