Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

How to Make Icons for Applications on Android and iOS

DZone 's Guide to

How to Make Icons for Applications on Android and iOS

First impressions are everything: Separate yourself from competition at the get-go.

· Web Dev Zone ·
Free Resource

bus-icon-in-subway

Make stunning, attention-grabbing icons for your mobile applications.

Icons for Android and iOS are graphics for a mobile application required to display the program on the screen of a mobile device. Almost all objects in the interface of mobile platforms are displayed using icons, as they simplify identification and visual search.

A quick glance at a graphic element is often enough to make a decision about downloading an application. Ideally, the icon should explain the purpose of the program without having to read the description.

You may also like: The Importance Of UX.

Tips on Creating Icons for Applications

The icon for applications is part of the graphical cover of the mobile platform. Therefore, it should be in harmony with the interface and icons nearby, while maintaining its uniqueness. Therefore, the first rule: read the instructions from Android and iOS developers:

  • The official site for Android product designers provides a list of preferences for style, components, animations, and other visual elements. 
  • Apple has instructions on creating visual elements for iPhone and iPad programs.

Simplicity and Clarity

Make friends with minimalism — the less details and “decor” in the picture, the more chances there are for recognition. The ideal icon is the one that symbolizes the essence and purpose of the software product. You don’t have to go far for examples. Just look at the program symbols of all popular social networks.

Scalability

Icons cannot be resized or stretched. Therefore, they should be readable in the size characteristics determined by the developers of mobile systems. Usually, the icon is displayed on the main page, as well as in the submenu, in a slightly smaller version. The display changes on different devices.

This depends on the resolution and other characteristics of the screen. In any case, users do not have to strain their eyesight to understand the meaning of the image. Therefore, the finished image needs to be tested for different screens.

Recognition

Simplicity (see the first rule) and a recognizable style are the parts of the ability to focus on the idea without unnecessary elements. The number of applications in the Google Play Market is larger than two million. The App Store has approximately the same number. Imagine two million icons fighting for user’s attention.

Here are some tips on how to make your image unique: 

  • Use a recognizable brand element (for example, the first letter of the name with a trademark font).
  • Demonstrate the functional feature of the program (for example, draw a message cloud for the messenger).
  • Use a symbol that is understandable to the target audience at a glance.
  • Do not copy competitors. If a niche is full of entirely colored bright icons, make your icon monochrome.
  • Analyze the result and try new ideas. It is impossible to calculate exactly which design option will “shoot.”

Coherence

An icon is one of the visual elements of a brand. It has to be coherent with the general branding style. The perfect icon:

  • Is made in the style and colors of the brand.
  • Visually describes the program and indicates its purpose.
  • Corresponds to the color scheme and design elements of the program.
  • Is clearly visible on light, dark, and colorful backgrounds (given the variety of custom wallpapers).

Uniqueness

There are many requirements for icons. The sizes, rounding rules, degree of transparency and other subtleties are normalized. However, you can implement any ideas on the "canvas," made according to the requirements of developers. Experiment — pick backgrounds, change perspectives, try different shapes and try not to repeat the ideas of competitors, even a bit.

Text

Taking size into consideration, you will not be able to write a lot on the image. Small letters are complicated to read. International program products are better to be universal. If the inscriptions are in English, they will be readable in most countries, Cyrillic alphabet or hieroglyphics will cause problems for foreigners. The ideal option is not to use the letters or use only 1 or 2 of the brand name.

The Unity of the Design and Functionality

The correct icon is one that does not make a user read the description of the program. An example of successful visualization is a camera image for the “Camera” application.


Icons for iOS application

Icons for IOS application

Size requirements

Every icon for iPhone and iPad has to be in both: small and big variant. Small is for the home screen (also Spotlight search and settings), big is used in the App Store.


Characteristics



iPhone6s Plus & iPhone 6Plus



iPhone6s, iPhone6, & iPhone5



iPhone4s



iPad & iPad mini



iPad2 & iPad mini



iPad Pro



An icon for an app



180x180



120x120



120x120



152x152



76x76



167x167



For the App Store



1024x1024



1024x1024



1024x1024



1024x1024



1024x1024



1024x1024



For the Spotlight search



180x180



For iPhone 6s & iPhone 6 use 120x120


For iPhone 5 use 80x80



80x80



120x120



60x60



120x120



Settings menu



87x87



58x58



58x58



58x58



29x29



58x58



Tools panel or Navigation bar



66x66



44x44



44x44



44х44



22x22



44х44



Tab panel



75×75 (max: 144x96)



50x50 (max: 96x64)



50x50 (max: 96x64)



50x50 (max: 96x64)



25x25 (max: 48x32)



50x50 (max: 96x64)



Design rules

1. As simple as possible: small details are not distinguishable on small logos.

2. Lack of transparency, minimalistic background. It should not suppress nearby elements.

3. Without copyright infringement: among other things, it is impossible to use corporate symbols of Apple.

4. In the interface, the icon does not necessarily have to be duplicated it just has to use the same color scheme.

5. Before downloading, it is better to test the picture on different types of backgrounds.

6. Upload a picture with right angles: the system rounds them automatically.

7. No need to mark the border of the image: the system itself adds pixel indentation.

Icons for Android Applications: Designer Standards

Icons for Android Applications

How to make an icon for an Android application according to the rules? You need to consider the size of the gadgets and the resolution of their screens. Graphic elements in applications are measured in dots per inch - DPI. There are several DPI categories:

  • Low or LDPI — 1200.
  • Middle MDPI — 1600.
  • High HDPI — 240; extra-high XHDPI — 320.
  • Extra-extra-high XXHDPI — 480.

For Android, you need to develop separate logo programs: iOS standards do not apply to them. Rule: the icon should be in PNG format, 32-bit, with a transparent background.

The size in the database is 48dp, + 1dp per edge. The higher the pixel density is, the better the detail. You can make several icons with different size options using the table:


MDPI basic size

HDPI 1,5x

XHDPI 2x

XXHDPI 3x

Icon

48px

72px

96px

144px


Icons for Google Play Programs

Size requirements: 512х512, high resolution. The image is needed only for the Google store, and it has to repeat the appearance of the image used to launch.

“Recommended” Section

This section demonstrates the graphical capabilities of the program. Icon sizes are 1024x500 pixels, PNG format, 24 bits, with a transparent background.

A few recommendations

  • Do not place anything in the cut-off parts, especially in the lower third of the picture.
  • It is better to put the image, logo, or other key element in the center.
  • Text has to be short and large.
  • A unique shape is allowed.
  • A cropped version of a large image is not allowed.
  • The image has to “weight” like other icons.

Best Services for Logo for Applications

If you do not have a designer who can develop a visual element according to all the rules, use specialized services, for example, Logaster logo editor.

IconsFlow

It is a relatively free service, where you can create or change a ready-made logo for a mobile application. There are two editors in the interface: the first is the main, there are a palette and a list of effects and styles, and the second has tools for changing the share. Graphic skills are required.

Fontawesome

Fontawesome provides a set of icons and fonts based on which you can create your own vector logos for mobile applications. The program requires download and at least basic skills of working with graphic editors.

Conclusion

Creating app icons is a compromise between standardization and creativity. On the one hand, you need to comply with all the requirements of mobile platforms (otherwise the program will not pass moderation). On the other hand, it is necessary to implement the idea, create a unique image that will stand out among competitors. In order to succeed:

  • Use the services of professional designers or, even simpler, specialized services.
  • If you have branded visual elements, be coherent with them, so that the icon will be in a corporate style.
  • Work on visualization ideas in which simplicity is combined with high recognition, visibility.
  • Experiment with variants by analyzing user response and activity.
  • Regularly update the logo to match the overall design of the mobile operating system, general and corporate trends.


Related Articles

Topics:
web dev ,icon ,android ,ios ,simplicity ,scalability

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}