# Guide to create App Icon Image

![](https://support.swing2app.com/wp-content/uploads/2018/09/App_icon.png)

**Guide to creating App Icon Images**

In this manual, we will guide you on how to create and register an app icon image on the Swing2App Maker(V2) – App Basic Information.

### <mark style="color:blue;">**1. What is an App Icon?**</mark>

**Represents an app image, which is the representative icon image displayed on the smartphone desktop.**

Each brand has its logo. Just think that the app icon is the same as that logo.

Register a specific logo that represents your app as an icon!

<div align="left"><img src="https://2942842367-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fy6EfxfjJ6wzTyBtue1Kt%2Fuploads%2Fgit-blob-48b38b69bdf61280fdbed89a874ed4494e1128fe%2F%EC%98%81%EB%AC%B8%EC%95%84%EC%9D%B4%EC%BD%98_%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C%EB%B2%84%EC%A0%841.png?alt=media" alt=""></div>

All the images you see on your phone are app icons.

Users can create their app icon images like this.

![](https://2942842367-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fy6EfxfjJ6wzTyBtue1Kt%2Fuploads%2Fgit-blob-37d090ecfc54b6cfde3d8934c30b51a52cdc966c%2F%EA%B5%AC%EB%B6%84%EC%84%A0.PNG?alt=media)

### <mark style="color:blue;">**2. Guide to create an app icon**</mark>

**App icons look small on the phone, but you need to work at a very high resolution.**

**The recommended icon size for the app is 1024 px \* 1024 px.**

**You should make it in the appropriate size and register it on the Maker(V2) page.**

What do you need to put in such a big image?

It’s should be less than 100px on the phone.

But the difference between the image quality on the computer web and the image quality on a mobile phone is huge.

\* Mobile phone photos are not only very high resolution but also very large.

The more you go to the latest phone, the higher the capacity. The picture quality is also really good.

Therefore, please be sure to work with the app icon which should be 1024px\*1024px according to the IOS recommended size\*\*.\*\*

**Important!!**

When creating an app icon image, it is recommended to use professional design tools – Photoshop, illustrations, etc.

When working with Paint, PowerPoint, etc., the picture quality may be worse than you expected.

**Also, app icons should be created separately by considering the style, brand, and logo of the app.**

We will explain the icon image design below.

![](https://2942842367-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fy6EfxfjJ6wzTyBtue1Kt%2Fuploads%2Fgit-blob-37d090ecfc54b6cfde3d8934c30b51a52cdc966c%2F%EA%B5%AC%EB%B6%84%EC%84%A0.PNG?alt=media)

### <mark style="color:blue;">**3. Guide on App Icon Design**</mark>

**Some of you may have difficulty designing app icons.**

<mark style="color:purple;">**The biggest point of the design is to be ‘neat’.**</mark>

-Don’t put too many characters.

-You can also not put a lot of wallpaper and images.

![](https://2942842367-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fy6EfxfjJ6wzTyBtue1Kt%2Fuploads%2Fgit-blob-00bc8fc1df4bfd5696b1752f24951498e5afd38a%2F%EC%98%81%EB%AC%B8%EC%95%84%EC%9D%B4%EC%BD%982_%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C%EB%B2%84%EC%A0%84.png?alt=media)

If you look at the app icon image on the market, we created just one logo of the brand.

Just a few examples.

> <mark style="color:orange;">-We only added the official word Swing on the Swing2App logo.</mark>
>
> <mark style="color:orange;">-Naver has a green background with English capital N + symbol logo</mark>
>
> <mark style="color:orange;">-Facebook only include "F" Alphabet base</mark>

How do you feel about designing?

Also, if you look at the apps installed on your phone, you can check how they are being designed to inspire your design!

**\*And as mentioned above, please be sure to use the professional image design tool.**

![](https://2942842367-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fy6EfxfjJ6wzTyBtue1Kt%2Fuploads%2Fgit-blob-37d090ecfc54b6cfde3d8934c30b51a52cdc966c%2F%EA%B5%AC%EB%B6%84%EC%84%A0.PNG?alt=media)

### <mark style="color:blue;">**4. Apply the App icon**</mark>

![](https://support.swing2app.com/wp-content/uploads/2018/09/makeapp1.png)

The App Icon can be attached to the **Maker(V2) → App Basic →App Icon** menu in the Swing2App.\
**You can register an app icon image that has been designed and sized.**\
Swing2App creation can be further edited, so you can apply it as a sample and edit it with another image.\
If the icon size is different, you can change the size with the image editing tool.\
\
**Image editor window**

![](https://support.swing2app.com/wp-content/uploads/2018/09/makeapp2.png)

The image editing tool window is a page where only the size of the image can be adjusted according to the recommended size (it cannot design images)

![](https://2942842367-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fy6EfxfjJ6wzTyBtue1Kt%2Fuploads%2Fgit-blob-37d090ecfc54b6cfde3d8934c30b51a52cdc966c%2F%EA%B5%AC%EB%B6%84%EC%84%A0.PNG?alt=media)

### <mark style="color:blue;">**5. App Icon size is different on Android and iPhones!**</mark>

> Sometimes app icons look different on iPhone and Android phones. What can be the reason?\
> Or\
> An app icon is created in a circle, so why is the image seen as a round rectangle when it is installed on the phone?

Some people ask this kind of question.\
The reason is that the icon styles provided by Android and iPhone platforms are different.\
This is because it shows the style set by the platform regardless of the actual icon design of the app.\
Let’s check the app icons shown on iPhone and Android phones below!

<mark style="color:blue;">**1) App Icon styles visible on iPhone**</mark>

<div align="left"><img src="https://2942842367-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fy6EfxfjJ6wzTyBtue1Kt%2Fuploads%2Fgit-blob-5cf018e96302942990bef74801ce35b1dfd42514%2Fiphone_icon1.png?alt=media" alt=""></div>

The iPhone has the same icon style on all iPhone models.

As you can see in the image above, the app icon is not a complete rectangle but is rounded and looks like a curved rectangle.

<mark style="color:red;">\* So you can make the app icon in a square, round or rectangular shape.</mark>

<mark style="color:red;">On the iPhone, all icon styles are presented in a round style.</mark>

<mark style="color:blue;">**2) App icon is shown on Android Phone – Android Version 8.0**</mark>

<div align="left"><img src="https://2942842367-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fy6EfxfjJ6wzTyBtue1Kt%2Fuploads%2Fgit-blob-9c2e6d5d4a0de8f299af08cb151880a8d14cf372%2F%EC%98%81%EB%AC%B8%EC%95%84%EC%9D%B4%EC%BD%98_%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C%EB%B2%84%EC%A0%84.png?alt=media" alt=""></div>

★However, android phones have different app icon styles depending on the version!

In previous versions of 8.0, the original app icon looks like it’s also visible on your phone.

Remember that App icons styles vary depending on the version and model of Android, so app icons may look different for each user’s Android phone.

**Therefore, the app icon shape may vary depending on which iOS platform you use, for those who run the app with Swing2App, please refer to the app icon creation and design.**
