How to Create an App Icon for iOS and Android

Start with one clear symbol, prepare the right source image, then generate and install platform-ready assets. This guide takes you from the first sketch to an icon you can test on a device.

What is an app icon?

An app icon is the visual mark people use to recognize your app on a home screen, in search results, and in app-store listings. It is different from a website favicon or a full wordmark: it must stay recognizable at small sizes and work within each platform's icon shape.

How to design an app icon

You can draw in a vector tool or start from a simple illustration. Focus on legibility before adding decoration.

Choose one focal point

Use a distinctive symbol or letter. Remove small details and long text that disappear when the icon is reduced.

Make the silhouette clear

Separate the symbol from the background with color and shape contrast. Keep important content away from the outer edge.

Preview at real sizes

Check the artwork at home-screen scale and against light and dark wallpapers. Adjust it before exporting the master file.

Need a starting symbol? Explore the app logo maker

Create an app icon without design software

If you do not have finished artwork, start with an original browser-editable template. This path uses the same preview and export workspace below.

1

Choose a starter

Compare the Orbit, Stack, and Signal templates. Each is an original, non-exclusive SVG starter that you can adapt for your app.

2

Change the initials and colors

Use one or two letters, choose a background and accent color, and keep enough contrast for the mark to remain clear at small sizes.

3

Preview before exporting

Open the template in the workspace, select your platforms, inspect the masks and small-size previews, then download the asset ZIP.

Browse editable app icon templatesUse a starter in the generator

Prepare source artwork for each platform

iOS: one opaque square

Prepare a 1024 × 1024 px square PNG with a full-bleed background. Do not bake rounded corners into the artwork. Our iOS export packages the 1024 px image in an AppIcon.appiconset for Xcode.

See the iOS icon guide

Android: foreground and background

An adaptive icon uses separate 108 × 108 dp layers. Keep the key symbol inside the centered 66 × 66 dp safe area. A transparent symbol works best as the foreground; choose a solid color or image for the background.

See the Android adaptive icon guide

View the icon size guide · Apple Xcode documentation · Android adaptive icon documentation

How to create an app icon with the generator

Use the workspace below after preparing your artwork. The same source can produce an iOS asset catalog and Android launcher resources.

1

Export the master

Save a crisp 1024 × 1024 px PNG. For an adaptive Android icon, a transparent foreground symbol gives the cleanest result.

2

Upload and select platforms

Add your file to the workspace and enable iOS, Android, or both.

3

Check the preview

Set the Android background and foreground scale. Make sure the important artwork fits within the safe-area preview.

4

Download the ZIP

Export the generated assets. The ZIP includes AppIcon.appiconset for iOS and res/mipmap resources for Android.

Open the icon generator
01
源圖片
或者使用 AI 生成

App icon templates

Choose an original icon style, then adjust its colors and initials. Everything is created in your browser.

Select a template to use it as your source image.

Browse templates and download SVG sources
02
配置平臺
已選 2 個平臺

Android launcher icon settings

Adaptive mode exports foreground and background layers plus Android resource XML. Legacy mode exports bitmap sizes only.

or

The dashed circle marks Android's central 66dp safe zone. Use a transparent source logo and keep important artwork inside it.

03
預覽

2 個平臺

等待上傳圖片

上傳圖片後，您可以實時預覽每個平臺的效果

源圖片

Help improve this icon tool

Having trouble uploading, choosing platforms or exporting? Tell us the page, browser, selected platform and steps to reproduce the issue.

Opens the contact form in a new tab so your work stays here. No image or settings are attached automatically. Please leave out confidential information.

Send tool feedback (opens in a new tab)
工具幫到你了嗎？
導出素材之後，歡迎用一杯咖啡支持作者繼續維護免費體驗。
  • 全部處理在瀏覽器本地完成，圖片不會上傳伺服器。
  • 一次導出覆蓋 iOS、Android、Chrome 等主流平臺。

每一杯咖啡都將用於伺服器成本與功能迭代。

☕請我喝杯咖啡

How to set your app icon in Xcode and Android Studio

Keep a copy of existing icon assets until you have checked the new icon in a build.

Set the iOS icon in Xcode

  1. Unzip the export and open Assets.xcassets in Xcode.
  2. Add the generated AppIcon.appiconset. If an AppIcon set already exists, back it up or replace its image and Contents.json only after checking the target name.
  3. In the app target's icon settings, select AppIcon. Confirm the 1024 px universal slot is recognized, then build and inspect the icon on a device or simulator.

Set the Android icon in Android Studio

  1. Unzip the export and inspect the generated res directory.
  2. Merge the mipmap density folders and mipmap-anydpi-v26 XML into app/src/main/res. Review any existing resources before replacing them.
  3. Check that AndroidManifest.xml points android:icon to @mipmap/ic_launcher. Build and test both adaptive and legacy launcher appearances.

Check before you ship

  • Keep the iOS artwork opaque and leave corner masking to the system.
  • Keep the Android focal symbol within the adaptive safe area; test more than one launcher shape.
  • Check the generated resource names, icon preview, and actual build before removing older assets.

App icon FAQs

What file format should I start with?

A high-resolution PNG is a practical input. Use an opaque square for iOS; for Android adaptive icons, a transparent foreground symbol makes it easier to choose a separate background.

What size should an iOS app icon be?

Start from a 1024 × 1024 px image for the universal app icon slot. Xcode can manage derived sizes from the asset catalog.

Why does Android need two layers?

Launchers apply different masks and visual effects to adaptive icons. Separate foreground and background layers let the icon adapt without clipping the central symbol.

Can I use the same design on iOS and Android?

Yes, reuse the core symbol, but export it to each platform's resource structure and check the different masks and backgrounds in a real build.

A strong app icon starts with a simple design and ends with a tested platform build. When your source artwork is ready, create the export with the app icon maker