How To Do Ios Dynamic App Icons

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…

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.

Don't use a white background — Using your brand's most prominent colors as the background makes it easier for your audience to identify your app.

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.

The name of an app is displayed beneath each app icon by default, so there's no need to include it onto the app icon's design.

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 Applies a Rounded Corners Mask to Each Icon — Make sure to design the icon with squared corners

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.

Design the icon at its smallest size to ensure clarity

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…

iOS App Icon Sizes — All of the sizes required for an app icon on the iOS platform

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.

Example Android Launcher Icon — An example of the creative freedom offered by Google's design guidelines

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.

_{Logos By Nick LLC is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com. As an Amazon Associate I earn from qualifying purchases. Read affiliate disclosure here.}