Aahfil.

App icon design: what works at 60 pixels on a Kuwait home screen

One shape, one or two colours, no words: the app icon rules, the Apple and Google requirements, and a test you can run next to Talabat, KNET and Instagram.

·7 min read

The short answer: one shape, one or two colours, no words

A good app icon is one recognisable shape in one or two colours, with no words, strong contrast against any wallpaper and nothing important near the corners. It should come from your logo system rather than be invented separately, and it should be tested on a real phone next to the apps it will actually sit beside. On a Kuwait home screen those neighbours are usually Talabat, KNET, Instagram, Snapchat and a bank app, and your icon has to be findable among them at a glance.

That is the whole rule set in one paragraph. The rest of this guide explains why each rule exists, what Apple and Google require, and how to test a draft before it goes to the developer. For the service side, see our app branding page.

Why 60 pixels is the size that matters

An icon is designed on a large canvas and judged at a tiny size. On most phones the home-screen icon is roughly 60 pixels across, and it shrinks further in notifications, the settings list, search results and the share sheet. Any detail that only shows on the large canvas is wasted, and fine lines or small text turn into blur.

It is also the most-seen piece of the brand. A customer might see your full logo on a bag or a sign now and then, but the icon is there every time they unlock the phone. That is why it deserves design attention in proportion to how often it is seen, not how small it is.

A useful habit is to design at the small size first. Sketch the shape as a tiny square before opening the large canvas, and only add refinement that still shows when you zoom back out to phone size.

Think of the icon as the brand reduced to its strongest single element. If your identity does not have one, that is a logo-system problem rather than an icon problem, and it is worth solving at the source; our logo design work builds that element in from the start.

The rules, and why each one exists

One shape. The eye finds icons by silhouette first. A single bold form, a letter, a symbol or a simple object, is recognised before it is read. Two or three competing elements cancel each other out at small size.

One or two colours. Colour is the second way people find an app, often faster than shape. A clear brand colour for the background and a contrasting colour for the shape is usually enough. Gradients can work if they are smooth and simple, as in Weseelik's gradient palette, but they should not carry meaning that disappears in a dark or tinted mode.

No words. The system already prints the app's name under the icon. Repeating it inside the icon wastes space and becomes unreadable. A single letter, Arabic or Latin, is different: it works as a shape, not a word.

Contrast and sunlight. Phones in Kuwait are used outdoors in strong sun for much of the year, in the car and in queues. Low-contrast pastels that look refined on a monitor can disappear on a bright screen in summer. Check the icon at full and at low brightness.

Keep away from the corners. Both platforms apply their own mask, rounded corners on iOS and varying shapes on Android, so anything near the edges can be cropped. Keep the important part of the shape well inside the centre.

Platform requirements: Apple, Google and Shopify

Apple asks for a single large square icon, 1024 by 1024 pixels, with no transparency and no rounded corners of your own; the system applies the mask and produces the smaller sizes. Recent versions of iOS also let users show icons in dark and tinted styles, and Apple has introduced a layered icon format, so plan a version of the shape that still works when the system changes its colours.

Google Play asks for a 512 by 512 pixel store icon, and Android apps use adaptive icons built from a foreground layer and a background layer, which the device masks into a circle, a rounded square or another shape depending on the manufacturer. The foreground needs to stay inside a central safe zone, because the outer area may be cropped or used for motion effects.

Platform specifications change, so the developer and the designer should check Apple's Human Interface Guidelines and Google's Android documentation at the time of the build. If your app is on the Shopify App Store, as our own Chaching Bundles is, the icon lockup also has to sit well on the app listing beside merchant-facing feature graphics. File types and why each matters are in our guide to logo file formats.

Arabic letters in an icon

For Kuwait brands, the question often comes up whether the icon should use an Arabic letter. It can, and it often should if customers know the brand by its Arabic name. The rule is the same as for Latin letters: one letter, drawn as a shape, with enough weight to survive at small size. Thin calligraphic strokes and dots that sit far from the main letter tend to disappear.

The letter should also hold up for people who will not read it as Arabic, because the icon sits on phones in every language. Weseelik takes a different route: a spanner forms part of a letter in its bilingual logo, and the icon uses that form, so it reads as a car-care symbol whether or not you read Arabic. Choosing type for this kind of mark is covered in our guide to Arabic fonts for bilingual brands.

A practical check: print the letter at icon size on paper and hold it at arm's length. If the letter changes identity when a dot disappears, a ب that could be read as a ت or a ن for example, choose a different letter or a symbol instead. Letters with a distinctive outline and no dots, such as و, م or ع, often hold up better at small size.

Where a good icon comes from: the logo system

Icons that work are almost always a decision inside the logo system rather than something drawn after it. When we design an identity, we ask early which element will become the icon, and design it to survive at 60 pixels. Hybrid Delivery's smiling H in green and blue is that element: the same mark appears on the van livery, the uniform, billboards and the app's splash.

Software brands need the same thinking at even smaller sizes. For Ordenaire, a restaurant ordering software brand, the deliverables included a wordmark and a favicon alongside the Ordemark design system, and a browser tab is an even tougher test than a phone home screen. The full process lives in our branding studio.

If your app is a new product for an existing brand, the icon should carry the colour and the shape customers already know from your shop in Salmiya, your Instagram account or your delivery bags. A new icon that ignores the brand is a new brand, whether you meant one or not.

Test it next to Talabat, KNET and Instagram

Here is a test you can run today. Export your draft at the real size, put it on a real phone, and place it between Talabat, KNET and Instagram on the home screen. Lock the phone, unlock it, and try to find your icon. If you cannot find it in about two seconds, simplify it: remove a detail, increase the contrast, or drop to one colour.

Then repeat the test in dark mode, inside a folder with three other apps, with a busy photo as wallpaper and with the screen brightness turned down. Look at it in a notification banner and in the store search results next to competing apps. Ask someone who has not seen it before to pick it out.

This is the honest do-it-yourself route, and for a test app it is enough: your logo's initial on a solid brand colour, checked this way, is a respectable first icon.

Keep the versions you reject. Comparing three drafts side by side on the same phone is usually more revealing than judging one in isolation, and it gives you something concrete to show a designer if you hand the job over later. Note what you saw in plain words: where the icon got lost, when it stood out and which colour caught the eye.

When the icon needs a designer

An icon is the most-seen piece of the brand and the hardest to get right small. It works when it comes out of the logo system, not after it, so the shape on the phone is the same one on the bag, the sign and the ad. Once you are paying for installs through Instagram, Snapchat or TikTok, the icon is also part of what decides whether that ad money turns into an opened app.

That is the point to have it designed properly, as part of the brand. We design icons inside the identity work, delivered in 2–3 weeks, and the same team can build the app and run its launch campaigns afterwards.

A designer also handles the parts that are easy to miss: the adaptive layers, the dark and tinted versions, the single-colour notification icon Android shows in the status bar, and the matching store graphics, so the icon arrives as a complete set rather than a single PNG. Those details are the difference between an icon that looks good on a large canvas and one that works everywhere it appears.

Frequently asked questions

What size should an app icon be?+

Design it on a 1024 by 1024 pixel square for Apple and provide a 512 by 512 pixel store icon plus adaptive foreground and background layers for Google Play. Then judge it at around 60 pixels, the size people actually see.

Can I put my logo text on my app icon?+

Usually not. The system prints the app name under the icon, and full words become unreadable at icon size. Use one letter or one symbol from the logo instead.

Should my app icon use an Arabic letter?+

If customers know you by your Arabic name, it is a strong option. Draw it as a bold single shape, keep dots close to the letter, and check it still reads as a clear mark to people who do not read Arabic.

How do I test an app icon?+

Put it on a real phone between Talabat, KNET and Instagram. If you cannot find it in about two seconds, simplify it. Then check dark mode, a folder, a notification and the store search results.

Can you design an app icon if I already have a logo?+

Yes. We find the element in your logo that survives at small size, or adjust it so it does, and deliver the icon with the store and splash assets as part of app branding.

Keep reading

All Branding & design posts →

Want this run for your business?