Sizes & Guidelines for Designing App Icons (iOS & Android)Sizes & Guidelines for Designing App Icons (iOS & Android) https://logosbynick.com/wp-content/uploads/2016/04/appicondesignheader3-848x310.png 848 310 Nick Saporito Nick Saporito https://secure.gravatar.com/avatar/d9a1bc4f29b2352da1ce14ad033328ab?s=96&d=mm&r=g
Whenever I design anything, I like to take into consideration the context in which the work will be viewed, who will be viewing it, and why they’ll be viewing it. Our job as graphic designers is to communicate a message to an audience using visuals, and these are factors that should always be included in the decision making.
When it comes to app icons, the context they’re usually viewed in is on a mobile device, alongside many other icons. The person viewing that icon is usually a user of the application, and the reason they’re viewing the icon is because they’re looking for the app (among other apps) so they can launch it. Our job, as the designer, should be to help that user identify the app and find the icon as quickly as possible.
How do we do this?
I like to put myself in the shoes of the end user and think about how I behave when I use apps on my mobile device. Here’s a screenshot of mine…
Logo Design Guide
Curious about the creative process that inspires me to come up with design ideas and how I go about executing them? Be sure to check out my logo design guide for a look behind the scenes at my systematic approach to coming up with design ideas.
When I’m looking to launch a specific app, I find myself subconsciously searching for the app on the screen by brand colors. For example, if I’m looking for Strava, I’m scanning for orange. If I’m looking for Facebook, I’m scanning for blue. For whatever reason, I find colors to be the most immediate form of recognition when sifting through page after page of app icons.
The problem I run into is when the app icons are white, which a lot of them are. When I’m looking for the Statcounter or Nikon app, I sometimes get them mixed up, and that wouldn’t be the case if these apps were using their respective brand colors as the background of the icon design. Otherwise, it’s causing needless confusion, and the entire point of having a brand identity is to give your audience visuals they can use to identify you with.
When your app icon blends in with everyone else’s, you make it difficult for your audience to identify you. This is why I personally think it’s usually ideal to use the brand’s most prominent colors as the background of the design, in order to assist the end user in finding what they’re looking for.
Another mistake to avoid when designing an app icon is including the name of the app or company within the icon’s design — or any other needless information that could clutter the design and disrupt communication to your end user.
Since the app’s name is already displayed beneath each app’s icon, cramming the name into the design is a bit redundant and tends to clutter and complicate it, making it (arguably) less effective for the end user. Ideally, you should stick with your prominent colors and the unique iconic mark for your brand.
If your app or company’s name is the logo (e.g. Netflix,) then you don’t have many choices (aside from using the initials, assuming they’re distinct and recognizable enough.) Just don’t do something reckless like trying to stuff your website address or phone number into it. The app icon serves a specific purpose, and using it as a billboard to advertise stuff isn’t it.
The Best Approach
Simply put, the most effective design an app icon can have is a design that is immediately identifiable by the end user. More often than not, the brand’s prominent colors and iconic mark (logo) should be used, since these are the visuals that are most immediately recognizable by someone familiar with your brand and using your app.
If the app doesn’t yet have defined branding or a logo, then a proper logo should be developed for the app before designing the app icon, in which case all of the conventional guidelines for designing a logo should be applied, and the logo should be a simple but unique conceptualization of what problem the app solves.
Designing for the iOS Platform
There’s two main players in mobile operating systems: iOS and Android, both of which have specific guidelines to be followed.
When designing for the iOS, it’s important not to give the graphic rounded corners, because once the icon is displayed on the device, the iOS system will apply a mask that automatically gives the graphic rounded corners. This is why all of the icons on your iOS device have consistently rounded corners. If Apple didn’t apply this mask, each icon would have varying degrees of how rounded the corners are.
iOS icon sizes range from 22×22 pixels, all the way up to 1024×1024 pixels. Since 22×22 is the smallest size the icon will be viewed at, it’s ideal to design the icon at this size first so you can ensure the design will be clear and identifiable at its smallest size.
In order to accommodate various devices, displays, resolutions and applications, the iOS platform requires a variety of different sizes for the app icon, in addition to it needing to be in .PNG format. So, you’ll have to render the graphic in all of these dimensions and in .PNG format. Here are all of the sizes required for the iOS app icon…
This should cover the basics. For official information about designing app icons for the iOS platform, please reference Apple’s iOS Human Interface Guidelines at this link.
Designing for the Android Platform
The Android operating system is slightly different in terms of design guidelines and required sizes.
For one, the Android platform has significantly different guidelines to follow as far as the shape of the icon goes. Unlike iOS, where we’re restricted to the confines of a preset rounded square, Google offers a little more room for creative exploration by allowing you to customize the shape of the icon and work with alpha channels so you can use transparency.
Up until recently, the rules were nearly nonexistent and you could get away with making your icon whatever shape and opacity you’d like. As I’m sure you could imagine, this turned the landscapes of our home screens into a chaotic mess. Google has since laid out more formal design guidelines to help mitigate this.
Here’s a key line grid to be followed when deciding on the shape of your app’s icon. A vector file for this grid will be included in the style sheet I’ll be giving you at the end of this post, so you can use it as needed.
These grids only account for the four shapes depicted. If you plan on using a more customized shape, refer to Google’s style guide for icons for a more in-depth overview. I’d also like to reinforce that regardless of which shape you use, you’ll have to use alpha channels to make sure you can render a PNG with the space around the edges being transparent.
The sizes in which the icon should be prepared and rendered vary drastically than that of the iOS. Here’s a list of all the sizes you’ll need for your icon to be used on the Android operating system…
App Icon Design Style Sheet
Since this is a lot of information to soak in, and probably too much information for you to sift through and reference when you design your next icon, I’ve put together a streamlined style sheet in PDF format for your reference. Feel free to download it and save it alongside your other design resources for when you design your next app icon. You can get the PDF here.
Bear in mind that Apple and Google usually change their guidelines with each major release, so make sure to keep a pulse on whether or not these guidelines change. If anything major changes after I publish this post, I’ll be sure to update the style sheet accordingly.
Join the Logos By Nick mailing list to receive email alerts whenever a new tutorial or article is posted. Your information will not be shared with anyone else and you will not be spammed with promotional offers. The only time you'll hear from me is when new content is posted.
You might also like
22 Best Logo Color Combinations for Inspiration22 Best Logo Color Combinations for Inspiration https://logosbynick.com/wp-content/uploads/2018/03/best-logo-color-combinations-1024x602.jpg 1024 602 Nick Saporito Nick Saporito https://secure.gravatar.com/avatar/d9a1bc4f29b2352da1ce14ad033328ab?s=96&d=mm&r=g
The Complete Guide to Preparing Logo Files for Clients in 2018The Complete Guide to Preparing Logo Files for Clients in 2018 https://logosbynick.com/wp-content/uploads/2018/03/logo-files-for-clients-1024x602.jpg 1024 602 Nick Saporito Nick Saporito https://secure.gravatar.com/avatar/d9a1bc4f29b2352da1ce14ad033328ab?s=96&d=mm&r=g
Guess that color association thing is related to how your brain is wired. I think there are different types of people, like those who can remember numbers and those who cant remember faces. Something to do with the left ad the right brain hemisphere.
Can you write something about fonts. Like licenses and where to buy ?! Classic fonts versus google fonts, etc.
I suppose so. I’d be glad to hear what others think though — if they can spot the tendencies in their behavior when it comes to finding apps. I think fonts would be a good topic to cover. I’ll have to queue that up. From my personal experience, I’ve had a lot of luck with contacting the creator of the font directly through email and working out some kind of deal with them for a license to use a font they created. Every designer is different, but I’ve worked out deals where I pay once for a license that I can use on my clients’ work over and over. I’ll have to write about it; it’ll be a long post.
I’m surprised as well. I had no idea Inkscape had that kind of attention, and I didn’t think the channel would take off like this without doing anything to promote it. I think there’s a lack of Inkscape content on Youtube, and there’s still plenty of room for new channels to come along.
You know, I was looking through my analytics the other day and it looks like the Inkscape forum where you shared my videos back when my channel first started played a major role in jump-starting the channel (27% of watch time from external sources for July 2015 came from Inkscape Forum,) so I have to thank you personally for that. I don’t think 7,000 subscribers is possible without people like you passing around the content, so I owe a lot of that success to you guys. Thanks!
Where is the link to the vector of the Android key line grid? I want to add a small drop-shadow to my square icon, but I’m unsure how much I should be reducing the image to fit the shadow. I don’t understand why Google doesn’t just make this freely available.