How to make an app icon (and the launch screen)

This guide covers the sizes each store asks for, the mistakes that sink a submission, and how to make an icon in Canva or with AI image generation.

The sizes, store by store

The practical rule: make it once at 1024 × 1024, filled background, square corners. Every other size comes from that file.

The most common mistakes

A transparent background on iPhone. Apple rejects icons with transparency. The background has to be painted all the way to the edge.

Corners already rounded. The system applies its mask on top of yours, and an odd outline is left in the corners. Upload the square.

Small text. The company name spelled out turns into a smudge at 60 pixels. If the brand depends on text, use only the initial or a short acronym.

Too much detail. A photo, a four-color gradient, three objects. On the home screen all of that becomes noise. One symbol, one background color, high contrast.

An icon just like the competitor's. If every pizzeria in town uses an orange pizza slice, your orange slice disappears in the list. Sometimes the brand's initial on the brand's color stands out more than the obvious drawing.

Android's adaptive icon

On Android, the icon shown on the device is adaptive: there are two layers, a background and a foreground drawing, and each manufacturer crops it with a different shape. On one phone it becomes a circle, on another a rounded square, on another a teardrop.

What that asks of you:

• keep the drawing inside the safe zone, a circle in the center about two thirds of the total width. Anything outside it may be cut off;
• leave breathing room: a symbol touching the edge is the first to lose a piece in the crop;
• the background should be a flat color or a simple pattern, because it may shift slightly with system animations.

A quick test: draw a circle 66% of the width in the center of your icon. If the whole symbol fits inside, it survives any crop.

A 30-second legibility test

Before submitting, shrink the icon to 48 × 48 pixels and look at it from a distance. Then place it next to screenshots of an iPhone home screen and an Android home screen with other apps.

If you still recognize the brand, it is good. If you have to squint, simplify.

How to make it in Canva

1. Create a design with a custom size of 1024 × 1024 px;
2. Fill the whole background with the brand's main color;
3. Place the symbol or initial in the center, taking up roughly 60% of the area, to respect Android's safe zone;
4. Use at most two colors besides the background;
5. Download as PNG. A transparent background is a paid Canva plan feature, and for the icon you do not want transparency, so the default PNG works.

For the Google Play icon, download the same file again and scale it to 512 × 512, or let the publishing tool do it.

How to make it with AI image generation

Image generators are good for finding an idea and bad at delivering the final file. The path that works:

1. Ask for the concept, not the finished icon. Something like "minimalist app icon, a stylized comb, thick strokes, flat burgundy background, no text, flat style". The "no text" matters, because generated letters usually come out wrong;
2. Generate several versions and pick the simplest, not the prettiest at large size;
3. Take it into Canva and redo the finish: center it, set the background to the brand's exact color, check the safe zone;
4. Check that it does not look like another company's brand. A generated image can resemble an existing logo too closely, and an icon similar to another app's is grounds for rejection and legal trouble.

The launch screen

It is the image shown between tapping the icon and the app being ready. It lasts a moment, but it appears on every launch.

Use the brand in the center, on a flat color. Android, since version 12, builds the launch screen the same way: a centered icon on a background color. Apple recommends that this screen be unobtrusive and similar to the app's first screen.

Do not use a full-screen photo. Each device has a different aspect ratio, and the photo gets cropped differently on each. What is centered on one becomes the edge on another.

Do not put advertising text on it. Nobody reads it, and on fast devices the screen disappears first.

Where this fits on Fabapp

On Fabapp, the icon and launch screen live in the Mobile app tab, at the Brand step of the native app setup (available from the Builder plan). What the platform asks for:

• icon: a square 1024 × 1024 PNG, with a filled background and no rounded corners. If you do not upload one, the platform generates one with the app's initial on your brand color;
• launch screen: a PNG with the brand in the center and a transparent background, because the color you choose fills the rest of the screen.

Note the difference: the icon goes with a background, the launch screen goes without. It is the most common mix-up, which is why it is worth making the two files separately in Canva. From there, the platform generates the sizes for each system. The walkthrough is in the guide Publishing your app to the stores.

The summary

• make it at 1024 × 1024, PNG, filled background and square corners;
• Apple rejects transparency; the system rounds the corners on its own;
• on Android, keep the drawing inside the central circle of two thirds;
• one symbol, few colors, no small text, and test at 48 pixels;
• the launch screen is the brand in the center on a color, never a full-screen photo.