What is the most recognizable aspect of your app? It should be the icon, the app’s hallmark image. Your icon is what sticks in people’s minds as it’s what they look for every time they open your app. This article is about the design of your app icon.
The app icon is featured in the app stores and on your customers’ phones. Whether it’s on an iPhone’s “springboard” menu or somewhere on an Android’s many kinds of “Launcher” menus, the app icon remains the most important visual element you will need to create to set your app apart. Oh, sure, there’s text under the icon too but the image is what packs the punch. The question is, however, which factors play a role in the design of an app icon?
The app icon can be uploaded in the Publish section, under App Vitals.
App icons come in many forms. Some are very detailed and make use of real life metaphors to showcase what the app is all about (like a camera or a notepad). In other cases the app icon is made as basic and simple as possible, just showcasing an app logo and brand colors. In the past few years trends have moved from more detail to less detail and will probably move back to more detail. It is important to take trends into consideration, but don't worry about them too much. Just make sure your app icon fits your brand and stands out on the phone home screen in the way you intended.
To make sure you have the right sizing and format for illustrations or logos in your app icon, take a moment to learn about the Apple's app icon guidelines and Google Play's icon specifications. They have some good tips about shapes and the amount of space you should keep from the edges to make sure your app icon looks great on every device.
The App Icon – Eleven Tips
Tip #1 – Take the time to create a beautiful app icon
Your app icon is a user’s first interaction with your app. Consider it your app’s calling card when users visit the app store. Your app icon can make the difference between encouraging engagement from potential users (and hopefully a download) and being completely ignored. In other words, take the time to put some thought into your app icon.
We’ve included some links to inspire you:
Tip #2 – Don’t use text in your icon
Avoid text in your app icon at all costs! Text featured within an app icon is often rendered illegible by varying resolutions and app icon sizes. We recommend that you use the text under the app icon wisely so that you’re left with more space for your app image.
Tip #3 – Make sure your app icon draws attention
Check the app stores for apps that are similar to yours. Check for these apps by using the same keywords that you would use to describe your app or by searching within the category that your app would fall under. Your app icon should be different; your app icon should demand attention. You can accomplish this by using a different color palette or a unique image. Some creative brainstorming with friends or colleagues often helps stir up new ideas.
Tip #4 – Use the same color palette as in the app.
The colors you use in the design of your app and its content should manifest themselves in the design of your app icon. This will ensure continuity and make your app recognizable.
Tip #5 – Avoid using too much detail.
Icons with too much detail suffer from the fact that icon sizes and display resolutions play a limiting role in how much of the icon detail can ultimately be see. App icons measure 57 x 57 pixels on iPhones without Retina displays and 114 x 114 pixels on iPhones and iPads with Retina displays. So though the App Store requires you use an image that is 1024 x 1024 pixels, these will be displayed much smaller on devices.
Tip #6 – Test the icon on your phone.
Make several test icons and set them to the appropriate size in an image for display on your phone. This way you can see all your test icons next to one another. Open this image on your phone to get a better idea of how the icons would ultimately look on your phone.
Tip #7 – Contrast
Make sure to use a lot of contrast and contrasting colors. Contrast is important to make your icon easy to recognize when someone takes a quick glance at their phone.
Tip #8 – Get it right the first time!
Changing your apps icon requires an app store update that often comes with update costs. You should also consider the fact that users who have grown accustomed to your apps icon will now have a hard time finding it.
Tip #9 – Avoid shades of grey
App stores usually have a grayish background color. Use a color that stands out against this drab background because people might not notice your app otherwise.
Tip #10 – Difference between iOS and Android
There is a difference between an Android icon and an iOS icon. Apple will always give your icon rounded corners after you’ve submitted it to the App Store. The Google Play store does not do this. If you’d like your icon to look the same in both stores, round the corners of your icon image. Use a template if you’re not sure about the exact dimensions required. You can find some templates here.
Your app’s springboard title
Your app’s icon will always have the app’s name under it. This is known as the “springboard title” in the iOS world. This title usually carries a maximum of around 12-13 letters (including spaces). This may vary depending on the width of the letters you’re using.
You can test your app’s potential name by creating a folder on your iPhone. This allows you to experiment using different names for your app.
- To make a new folder, hold your finger down on an app until it starts shaking.
- Drag the app over another app to create a folder.
- You can now edit the folders name. (To edit it again just hold down on the folder’s icon until it start shaking.)
There are many factors that can influence the number of letters you can use in your app’s name. For example, “Markus Schulz” doesn’t fit; “Markus schulz” does fit, as does “markus schulz”. Ultimately, we chose to go with “MarkusSchulz”.
The app stores give you the opportunity to use a longer name in the stores. There are also search terms that you can designate to your app so that potential users can find your app more easily.
People will generally recognize your app based more on its icon. Your app’s name acts more as support. The name is thus less important.