<img height="1" width="1" style="display:none;" alt="" src="https://ct.pinterest.com/v3/?event=init&amp;tid=2619889133914&amp;pd[em]=<hashed_email_address>&amp;noscript=1">

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 getting your very own mobile app, you will have to create one that really stands out from the crowd. We put together a list of considerations to accomplish this.

The difference between icons & logos

Icons and logos are both are a powerful representation of your brand. However, there are some important distinctions to consider in order to create an app icon that works for your brand.

Logos are graphics, that state the name of a company, or product. They will can be made entirely of type, while others exist entirely as a symbol. Some combine text and graphics in the same design to convey their brand personality.

Think of logos as a much bigger representation of your business.

Target's logo is both recognizable and distinct. Everyone knows what it looks like.

Target's recognizable and distinct logo 

Icons are an artistic summary of logos. While you can think of logos as the much bigger picture, icons are more of a snapshot.

Usually, icons are designed quadratically and scale within specific dimensions.

Target's icon is of, well, a target. It's a clear snapshot of their logo.

Target's icon is a perfect summary of their logo

Logos don't do well in icon designs. They look cluttered and squashed within their square confinements, which makes them hard to recognize.

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.

Design your mobile app 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. You do not need to include nonessential words. Embrace simplicity. Your app's name will show beneath the icon.

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. 

Put your icon to the test

Your icon is going to show up in various places on customer devices.  Attractiveness and legibility are a MUST. To keep these qualities across all sizes, you will have to make it scalable. 

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?

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. 

iOS App Icon Standards

Here's 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 phone with app icons displayed

Android App Icon Standards

All Android icons follow the same scaling rules. When creating your icon files, you must make five 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.

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.

The Takeaway

By following the 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.

In fact, if you develop your app with CommentSold, we can do the legwork for you.

Topics: Marketing, Technology, DIY, Mobile App

Put your brand in your customer's pockets