# App appearance: icon, launch screen, colors

Source: https://saastostore.com/docs/app-appearance

The first seconds decide whether your app feels like an app: the icon on the home screen, the launch screen, and colors that match your site. All three are set in the Configuration tab, and a new build applies them.

## App icon

Upload a square PNG of 512×512 pixels, or let the AI generate one when you launch. We use it for the app icon on Android, iOS and desktop, and for the store listing.

- Keep the logo centered, with some margin: Android may crop the icon to a circle.
- Use a plain background rather than transparency.
- If the build stops on an icon error, upload a square PNG and relaunch.

## Launch screen

| System | What people see |
| --- | --- |
| Android | Your logo, held for up to about 3 seconds while your site loads |
| iOS | Your logo, centered on your primary color, for builds since 31 October 2026. Then a blank page until your site loads |
| Android TV | The same as Android, plus a [TV banner](https://saastostore.com/docs/android-tv) |
| Desktop | Your site opens directly in its window |

The launch screen only stays for a short moment, so the speed of your first page matters more than the picture. A fast home page is the best launch screen.

## Colors and theme

By default, the app takes its colors from your website. You can also set them yourself in the Shell Designer, with one set for light mode and one for dark mode:

- Primary color, and the text color on top of it
- Background and surface colors
- Active tab, inactive tab and tab bar background
- Status bar color
- Corner radius of the side menu

## Dark mode

The native shell follows the phone's setting. If your site is always dark, turn on **Force dark mode** so that the shell doesn't show a white header above a dark page. This only affects the native parts: your website keeps its own theme.

## Status bar

The status bar style sets the color of the clock and battery icons: `auto`, `light` or `dark`. If you need it to change from page to page, the [status bar plugin](https://saastostore.com/docs/javascript-bridge#status-bar) does that from JavaScript.

## Logo in the header

You can add a separate logo for the header in the Shell Designer, as a PNG. It takes priority over your icon inside the app, including on the launch screen.

## Check before you build

The preview next to the settings shows your navigation and colors. It can't show hidden site elements, because your site is loaded from another address there. The test build or a real build is the final check.

> Only paid builds use your own logo. The free test build carries the SaasToStore logo.

## Frequently asked questions

### Why does my icon look cropped on Android?

Android applies a shape to app icons, often a circle. Keep your logo in the middle of the image, with a margin of about a fifth on each side.

### Why do I see a white screen after the launch screen on iPhone?

The launch screen ends when the app has started, and your site then loads in the page behind it. If your home page takes a while, that blank moment gets longer.

### Can I change the app name?

Yes. Change it in the project and launch a new build. The name shown on the store page is edited in the store listing.

### Do my colors update when I change my website?

Your site's colors update at once. The native parts, like tabs and header, keep the colors of the last build.