How to Create an Icon for iOS and Android Apps: Rules and Ways

Go to the profile of Dmitry Leiba
Dmitry Leiba
How to Create an Icon for iOS and Android Apps: Rules and Ways

Table of Content:

  1. Why Do You Need a Good Mobile App Icon?
  2. 5 Tips on How to Make an App Icon
  3. App Icon Design Trends
  4. How to Make an Icon for Android App?
  5. How to Make an iOS App icon?
  6. How to Make an App Logo: the Best Services
  7. Do It and They Will Come

Mobile application development is a treasure trove of opportunity. By 2020 the revenue of this business sphere is expected to yield over $189 billion. It makes sense since the average smartphone owner launches around 30 different apps on their device per month. There are millions of apps available right now - 2.2 million apps on the Apple App Store and 2.8 million on Google Play. What a selection, and at the same, what a fierce competition.

Why Do You Need a Good Mobile App Icon?

What makes you try an app when you’re browsing? It’s the icon. This is the main drive that prods the split-second decision to open the app page. The app icon must spark the interest of the user and convince them the mobile app is credible and there’s value in installing it.

App store icons example

5 Tips on How to Make an App Icon

The mobile app icon must be original. Don’t take the “easy” road by infringing other people’s work. Try to match the icon with the design of the app interface in terms of color and style.

We’ve compiled 5 universal rules to follow in order to help you learn how to build a logo. Here they are:

1. Make a Sharp and Scalable Image

The mobile app icon is displayed in three places: the main page of the store, in the submenu (in the smaller version), and as an icon on the screen of a mobile device. In all cases, the icon will have different sizes.

The on-screen display of the icon often depends on the resolution and custom settings. The main requirement - the user should not strain their eyes when looking at the icon. 

You can preview your icons and see how they look like with the help of certain tools, like Appsparky.

2. Have a Telling Symbol or Icon

Whoever sees your icon should recognize what it’s about or how it associates with your product or brand. It’s best when the icon is universally “readable”, regardless of the user’s language and culture. The effectiveness of the icon depends on the user’s understanding of your design idea. YouTube is a great example - they took an easily recognizable Play button and made it their logo.

Youtube icon example

3. Create a Truly Unique Icon

Your app icon will compete for the user’s attention with millions of other icons. Uniqueness, in this case, is a chance to make the image easy to notice. To make the app icon unique, try the following:

Explore other icons in your niche. Analyze the best ones, inspire, and do everything differently. Copying other people's ideas entirely is a sure way to failure

Look for new meanings in color combinations and symbols. Experiment, try, explore!

Get inspiration from the game app icons: this niche has less formal image requirements and more creativity

Use the recognizable visual element of your brand as your main idea. Twitter is a mighty fine example - visuals align with app name (tweeting bird).

Twitter icon example
Fun fact: the bird on the Tweeter icon is a mountain bluebird, although its head is a bit too large.

4. Use a Moderate Number of Letters

Facebook has every right to use the branded letter F in the application icon. So do dozens of famous services. If your corporate identity is developed in a way that users will recognize you by 1 or 2 letters, then it’s just excellent. However, do not type in the full company’s name in the icon. And in general, remove as many words as possible.

Pay attention to the visual details, otherwise:

• the name of the app will already be written next to the icon

• letters and words will distract from the images - and vice versa. The scattered attention of the user leads will sway them over to your competitor with a clearer icon.

If the name is short, you can try to use it as a central element, like this example from New Zealand’s company Xero.

Xero icon example

5. Match the Icon’s Style With the App’s Interface

A good app icon expresses the concept of the app, creates a complete product image, and complements the app design. The icon should:

• match the color scheme and style of the application

• demonstrate what the app is for

• Be well visible in light and dark design themes, as well as different types of custom wallpaper backgrounds.

And another good example of how to make a brand logo that fits the bill is Dropbox:

Dropbox icon example

The user can choose the dark theme of the icon design of the app store of their choice. It is important that the icon looks equally well on all variations of the background. 

Be sure to test your icons with the IconTester service. Here is one example of how the testing process looks like:

Icontester mapping example

So how to make an icon for Android application or iOS, considering the latest design trends? We can give you some actionable recommendations:

1. Simplify. Remove the excess from the composition - focus on the main thing. The simpler the image is, the better it will be recognized on any type of screen. 

The Smartsheet scheduler has exactly that kind of logo.

Smartsheet example logo

2. Remove any unnecessary items. Remove all the minor details that do not affect the meaning of your logo. Once only the main shape remains, the result will be better remembered. 

A good example is Calendly:

Calendly icon example

3. Highlight the details. Highlight one of the details of your icon or make the logo a little asymmetrical. This will attract users’ attention. 

This is what the Todoist developers made:

Todoist icon example

4. Use gradients. This is the trend of 2018, and it remains relevant. With the help of the gradient, the picture can be made more attractive and deeper. 

Instagram is a fine example of the trend:

Instagram icon example

5. Try neon shades. Minimalist logos can be enlivened with bright neon colors in gradient logos. 

This is the trend that Spotify's designers based on:

Spotify icon example

6. Go "Handmade". Hand-drawn images with blurred lines and natural colors are the trending now. 

This option was chosen for MetLife logo:

MetLife logo example

How to Make an Icon for Android App?

The Android app icon needs to be developed based on your existing gadget settings and screen resolutions. DPI is used to measure the quality of graphics in apps. The DPI classification is as follows:

• LDPI - 120

• MDPI - 160

• High DPI - 240

• XHDPI - 320

• XXHDPI - 480

The app icon should be designed complying to the Android terms.

Icon Requirements for Launching an app:

The picture must be in PNGs format with 32-bit color mode. Transparent background is a mandatory requirement.

The minimum icon size for MDPI is 48dp, the edges are 1dp. Detailing depends on the DPI. Size options for other metrics (in px):

MDPI

HDPI

XHDPI

XXHDPI

XXXHDPI

48

72

96

144

192

Requirements for Publishing Icons on Google Play 

The mobile app icon should be 512x512 pixels. This icon is designed specifically for Google Play and cannot be used as an icon to launch the app. It differs in size from the icon, which is used as a shortcut to launch the program. But at the same time, the images on different variants of the icons should be identical.

Other requirements:

  • format: 32-bit PNG
  • file size — up to 1024 КB
  • color space— sRGB
  • shape — square. The system will automatically apply a mask with rounded corners. The radius is 20% of the size of the icon.
  • the shadow is not needed: it will be applied dynamically.

How to Create an Icon for Android app - tips

Use the following guidelines:

• place important elements in the center, away from the edges and bottom third of the frame

• place the logo in the center of the image, with vertical and horizontal alignment

• use only large font sizes for letters

Creating an icon for the Android mobile app can be accomplished for a specific purpose. For example:

1. Branding. Create an original icon using your brand colors and symbols.

2. Engage users who search for apps on Google Play. Quality design is an indicator of the excellent design of your program.

Regardless of the purpose, the image for the Android app should look clear in all settings, combined with all variants of backgrounds.

How to Make an iOS App icon?

For each iOS application, you need to make a small and large icon variant. Small is required to be displayed on the home screen and in the system (after installing the application). The big one is displayed in the App Store.

Device

Spotlight icon size

iPhone

120px×120px (40pt×40pt @3x)

80px×80px (40pt×40pt @2x)

iPad Pro, iPad, iPad mini

80px×80px (40pt×40pt @2x)

Device

Settings icon size

iPhone

87px×87px (29pt×29pt @3x)

58px×58px (29pt×29pt @2x)

iPad Pro, iPad, iPad mini

58px×58px (29pt×29pt @2x)

Device

Notification icon size

iPhone

60px×60px (20pt×20pt @3x)

40px×40px (20pt×20pt @2x)

iPad Pro, iPad, iPad mini

40px×40px (20pt×20pt @2x)

Create a few small icons, taking into account the required settings for different iOS devices. There should be no dramatic visual differences between pictures of different sizes.
General icon requirements:

  • 1024 x 1024 pixels
  • 72 dpi, RGB, one layer, not transparent
  • JPEG or PNG.

Important: You do not need to add a separate highlighted frame to the icons: the system automatically adds a 1-pixel indentation to all icons to highlight them beautifully.

Design Rules for iOS App Icons

Follow these recommendations:

1. Simple design. It has to be the central element that conveys the essence of the app, on a simple and memorable background, and with a minimum of details.

2. Clear emphasis. Focus on the element that will attract users and indicate the purpose of your program.

3. Recognition. No puzzles: the user has no time to do the puzzles. They should understand the importance of the icon and the program instantly.

4. Simple opaque background. Focus on the main element.

5. No copyrighted images. This also applies to items related to the Apple brand.

6. Test the icon on different background options. Make the image blend well with most custom wallpaper options.

7. Leave the corners straight. The system will make them round.

8. Consider the features of the dark mode running in iOS 13. Standard application icons may not look well on it. Images for a dark background are needed instead. This option was proposed by The Mac Observer at the stage of beta testing.

How to Make an App Logo: the Best Services

If you want to design an icon for the mobile app yourself - we have chosen some convenient services for you.

Logaster

It is an online logo generator. It offers dozens of unique visual solutions. You can specify the desired color scheme and theme. You can edit the version you like and download it in the appropriate sizes. With Logaster, the question of how to make a free logo doesn't even exist.

Logaster example screenshot

Makeappicon

It's an icon Generator for Android and iOS. You can upload your own image, based on which the service will create logos. They will meet the current app stores requirements.

Makeappicon interface example

IconsFlow

It is an online icon editor that allows you to create unique style images. You can feel like a designer by selecting the right elements and colors. You can upload and edit your own image.

Iconsflow interface example

Font Awesome

It is a powerful icon editor for mobile apps and social networks. It offers many options and settings to create a unique image.

FontAwesome interface example

Do It and They Will Come

How to make an icon for a mobile app is a complex question. To get an interesting, unique and attractive result that meets the requirements of mobile platform developers, you need to follow the rules and the latest trends. Give these awesome idea generation services and make your app attractive to your audience.

Посмотрите другие публикации:

A Guide to Conversion Rate Optimization for your App

A Guide to Conversion Rate Optimization for your App

Conversion Rate Optimization (CRO) is complex because it includes a lot of different tasks. To make the most out of your product page, you should choose a coherent design for all of these metadata elements.

Oliver Hoss
Oliver Hoss
Rebranding with ASO in mind: Skyscanner's case

Rebranding with ASO in mind: Skyscanner's case

3 months to rebrand an app with 40 markets in two app stores. Impossible? Not at all. Read this inspirational case from Skyscanner's own Alexandra Lamachenka and learn how she made it possible with ASO.

Alexandra Lamachenka
Alexandra Lamachenka
2020 App Store Optimization Trends + ASO Checklist [PDF]

2020 App Store Optimization Trends + ASO Checklist [PDF]

Ilia Kukharev, ASO Personality of the year, shares some thoughts on what will define App Store Optimization in 2020 + ASO Checklist that can help you stay effective

Ilia Kukharev
Ilia Kukharev