# App Icon

The **App Icon** represents the **visual identity** of your mobile application.\
It is the icon displayed on:

* The device **home screen**
* The **app drawer**
* Application shortcuts and task switchers

A well‑designed App Icon helps users recognize your application instantly and reinforces brand identity.

ONEWEB allows you to configure **custom App Icons** separately for **Android** and **iOS** applications.

***

### Configure App Icon for Mobile Application

#### Step 1: Open App Icon Settings

1. Open your **Mobile Application** in Page Designer
2. Navigate to the **App Icon** section

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FuYwznAxMSwLPNm1y5ZT0%2Fimage.png?alt=media&#x26;token=16bf4baf-58c3-4aa2-8bfe-443c6416f5b2" alt=""><figcaption></figcaption></figure>

<p align="center"><em>Open App Icon configuration</em></p>

***

#### Step 2: Choose Platform‑Specific Icons

ONEWEB allows you to configure:

* **Android App Icon**
* **iOS App Icon**

You can upload different icons optimized for each platform.

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FRO4469zjypvpFTYtIjz1%2Fimage.png?alt=media&#x26;token=d980faf7-46e3-4abd-8a5c-88b7481bd579" alt=""><figcaption></figcaption></figure>

<p align="center"><em>Select platform‑specific icon configuration</em></p>

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FXBNFgkINI5on6JNa01R2%2Fimage.png?alt=media&#x26;token=a98b227b-2bce-4321-a0cb-2f93d0955369" alt=""><figcaption></figcaption></figure>

<p align="center"><em>Android / iOS icon options</em></p>

***

#### Step 3: Upload App Icon Images

1. Drag and drop the image file\
   **or**
2. Browse and select an image from your computer

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FKQpPDGoydXxsGhPtv0yq%2Fimage.png?alt=media&#x26;token=c68e31f3-19a2-469b-8bb4-789fc19b85b0" alt=""><figcaption></figcaption></figure>

<p align="center"><em>Upload App Icon image</em></p>

***

#### Step 4: Support Multiple Resolutions (Recommended)

To ensure optimal appearance across devices, users can upload **different icon images with different resolutions** for:

* Various screen densities
* Different device sizes

This helps maintain clarity and sharpness on all supported devices.

***

### Design Perspective

As part of **mobile UX best practices**:

* Use a **simple, recognizable design**
* Avoid small text inside icons
* Ensure icons look clear at small sizes
* Use platform‑specific design guidelines where possible
* Keep Android and iOS icons consistent with brand identity

A well‑designed App Icon improves **discoverability, professionalism, and user trust**.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.onewebstack.com/oneweb-platform-th/building-apps/ui-page-designer/ux-ui-components/pages/page-features/app-icon.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.