Overview
When a UnifyApps Mobile App is distributed through the iOS App Store or Google Play Store, the operating system needs icon artwork in specific formats. Android and iOS want different artwork — Android draws the icon as layers (artwork in front, a background behind) that the OS masks into different shapes, while iOS shows a finished icon that changes with the device's light, dark or tinted appearance.
All mobile icon configuration is managed in Builder Settings → General → Brand Assets, which shows the Android and iOS icon slots when the app type is Mobile. Icons are set per app and are bundled into the build when you create a new release from the app's Releases tab.
Warning: Icon changes require a new mobile build. Unlike web app changes that go live on publish, mobile app icon changes only take effect when a new binary is built and distributed through the App Store or Google Play. Update your icons before initiating a new build submission.
Icon Slots
The Brand Assets panel for a Mobile App has the following slots. Each slot takes one PNG file.
Section | Slot | What to upload | Size the panel asks for |
|---|---|---|---|
Android | Foreground Logo | Your icon art, without a background | 1024 × 1024 px |
Android | Monochrome Logo | The same mark flattened to a single color | 1024 × 1024 px |
Android | Logo Background | Either a Color or an Image shown behind the foreground | 1024 × 1024 px (Image) |
iOS | Light Mode Logo | The finished icon for light mode, with its background included | 1024 × 1024 px |
iOS | Dark Mode Logo | The finished icon for dark mode, with its background included | 1024 × 1024 px |
iOS | Tinted Logo (Optional) | The icon for the tinted appearance | 1024 × 1024 px |
Notification | Icon and Color | Android's notification icon, without a background, plus its color | 96 × 96 px |
iOS Icons
iOS draws the icon you give it, so there is no separate background slot. Upload three finished square icons, each a 1024 × 1024 px PNG with its background already in the image: a Light Mode Logo, a Dark Mode Logo and, optionally, a Tinted Logo. iOS shows the one that matches the device's current appearance.
iOS Icon Requirements
No transparency. Apple requires an opaque icon background. Icons with transparent or semi-transparent backgrounds fail App Store validation. Use a solid background color, ideally your brand's primary color.
No rounded corners in the source. iOS applies a rounded corner mask automatically at all sizes. If you add rounded corners to the source image, double rounding will occur. Submit the icon as a full-bleed square.
No text. Icon text is illegible at small sizes and Apple's App Store review guidelines discourage it.
Simple, recognisable mark. The icon must remain recognisable at 20 × 20 px (the smallest size iOS uses, for notification badges). Design and test at that size.
Android Icons
Android uses an adaptive icon system that separates the icon into two layers — a foreground and a background — and lets the OS apply a shape mask. The panel defines adaptive icons for Android 12 and above. Different device manufacturers use different mask shapes (circle, squircle, teardrop, rounded square), and the adaptive icon system ensures your icon looks native on every device.
Foreground Layer
The foreground layer contains your icon art — typically a centered logo mark or monogram — on a transparent background. Design rules:
Design the icon art at the center 66 dp of the 108 dp canvas — about the center 626 × 626 px of the 1024 × 1024 px upload, leaving roughly 199 px on each side. The outer margins are the safe zone — the OS may clip up to 33% of the icon area depending on the mask shape. Artwork outside the safe zone may be cropped.
Upload a 1024 × 1024 px PNG in the Foreground Logo slot.
Use a transparent background — Logo Background provides the background. A background baked into the foreground file gets clipped along with the artwork.
Monochrome Logo
Upload the same mark flattened to a single color as a 1024 × 1024 px PNG in the Monochrome Logo slot.
Background Layer
Logo Background is what shows behind the foreground art after the OS applies its mask shape. It is a toggle with two options:
Color — pick a color with the color picker. This is the default.
Image — upload a 1024 × 1024 px PNG with a pattern or gradient for a richer background.
Notification Icon
The Notification section defines your app's notification icon and color for Android. Upload the Icon without a background (PNG, 96 × 96 px) and choose a Color.
Splash Screen
Splash screens are shown while the app initialises on launch. Configure them in Builder Settings → General → Splash Screen, which appears only for Mobile Apps. The panel shows a live preview on an iPhone and an Android frame while you edit.
Group | Field | What it sets |
|---|---|---|
Light Mode | Logo | The image shown when the device is in light mode (PNG, 1024 × 1024 px) |
Light Mode | Background Color | The color filling the screen behind the image |
Dark Mode | Logo | The image shown when the device is in dark mode |
Dark Mode | Background Color | The background color used in dark mode |
Appearance | Image Fit | How the image sits inside its box: Contain (default), Fill, Move, Stretch vertical or Stretch horizontal |
Appearance | Width, Height | The size of the image box, in pixels |
Note: Dark and light splash screens. The Dark Mode logo and background are a separate pair, not derived from the light ones. If you leave the dark pair empty, a device in dark mode shows the light logo on the light background.
Uploading Icons
Open Brand Assets: From the Application Builder, click the gear icon → General → Brand Assets.
Upload the Android icon: Upload the Foreground Logo (without a background) and the Monochrome Logo, then set Logo Background to a Color or an Image.
Upload the iOS icons: Upload the Light Mode Logo and Dark Mode Logo, and optionally the Tinted Logo. Each one includes its background.
Set the notification icon: Upload the Notification Icon (without a background) and choose its Color.
Configure the splash screen: Open General → Splash Screen. Upload a Logo and choose a Background Color for Light Mode and for Dark Mode, then set Image Fit, Width and Height under Appearance.
Start a new build: The builder saves your changes automatically. Icon changes are bundled into the next mobile build: open the app from the Applications manager, go to its Releases tab and click New release.
Best Practices
Design at 1024 px and export down. Start your icon design at 1024 × 1024 px in a vector design tool (Figma, Sketch, Illustrator). Export a 1024 px PNG for each Android and iOS slot. Never scale up from a small icon.
Avoid text in icons. At the smallest sizes (20 px for iOS badges, 48 px for Android launcher on some devices), any text becomes illegible and the icon fails readability requirements for store submission review.
Test on real devices. Preview tools in design software do not accurately simulate all Android mask shapes. Sideload a test build and check the icon on actual iOS and Android devices before submitting to the stores.
Test against both light and dark wallpapers. Icons look different against dark home screen wallpapers. An icon with a dark background that is visually appealing on a light wallpaper can become nearly invisible on a dark one. Test both scenarios.
Keep the adaptive icon art centered and padded. The Android safe zone is approximately 66 dp at the center of the 108 dp canvas — about the center 626 px of a 1024 px upload. Keep all visual information within this safe zone to avoid clipping on devices with aggressive mask shapes.
Use your brand's primary color as the icon background. Consistent use of your brand color in the app icon ensures it is immediately recognisable on the home screen alongside other apps.
Related Pages
Logo and Favicon — in-app logo and browser tab favicon for Web Apps and the app navigation header.
Mobile Security — security settings for mobile deployments including screenshot prevention and biometric lock.
App Configuration — full reference for Builder Settings including the Mobile section.