Overview

When a UnifyApps Mobile App is distributed through the iOS App Store, Google Play Store, or installed as a Progressive Web App (PWA) on a device home screen, the operating system requires a set of icon images in specific sizes and formats. Different platforms have different requirements — iOS uses a single high-resolution source image and generates all sizes from it, while Android requires a separate adaptive icon design that the OS can mask into different shapes.

All mobile icon configuration is managed in Builder Settings → Mobile → App Icons. Icons are set per app and are bundled into the build when you generate a mobile binary from the UnifyApps console.

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.

Required Icon Sets

The following icon images must be provided before submitting a mobile app to either store. Missing required icons block the build process.

iOS Icons

iOS requires a single 1024 × 1024 px PNG source image. Apple's tooling generates all other icon sizes (20, 29, 40, 58, 60, 76, 80, 87, 120, 152, 167, 180 px) from this single source during the app build process. You do not need to upload icons at each individual size.

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 introduced in Android 8.0 (API level 26) that separates the icon into two layers — a foreground and a background — and lets the OS apply a shape mask. Different device manufacturers use different mask shapes (circle, squircle, teardrop, rounded square). The adaptive icon system ensures your icon looks native on every device regardless of the manufacturer's chosen shape.

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 (approximately 264 px at 4×) of the 108 dp canvas. 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 at 432 × 432 px (4× the 108 dp canvas) for sharp rendering on all screen densities.

• Use a transparent background — the background layer provides the color.

Background Layer

The background layer is the base color or pattern that shows behind the foreground art after the OS applies its mask shape. Options:

• Solid color — enter a hex code in the background color field. The platform generates a solid-color background layer automatically.

• PNG image — upload a 432 × 432 px PNG with a pattern or gradient for a richer background. The image should tile or fill cleanly because the OS may stretch or crop it.

Legacy Icon (Pre-Android 8)

For devices running Android versions earlier than 8.0, the OS does not support adaptive icons. The platform automatically generates a legacy icon from your adaptive foreground and background layers by compositing them onto a white square background. If this automatic generation produces a result you do not like, you can upload a separate legacy icon in Builder Settings → Mobile → App Icons → Legacy Icon (512 × 512 px, PNG).

PWA Icons

When a user adds a Web App or Mobile App to their device home screen via the browser's "Add to Home Screen" feature, the operating system uses the PWA manifest icons. Upload icons at both standard sizes for full compatibility across devices and OS versions:

If PWA icons are not uploaded, the platform uses the favicon as a fallback. The favicon is typically 64 × 64 px, which renders blurry on high-DPI home screens. Always upload dedicated PWA icons for apps that support home-screen installation.

Splash Screens

Splash screens are shown while the app initialises on launch. Configure them in Builder Settings → Mobile → App Icons → Splash Screen.

iOS Splash Screen

iOS supports a single universal splash screen image:

Note: Dark and light splash screens. Upload separate splash screen images for light mode and dark mode in Builder Settings → General → Splash Screen. If only one is provided, the same image is used for both modes regardless of the device's current color scheme.

Android Splash Screen

Android 12 and later uses a system-generated splash screen that centers the adaptive icon on the device's window background color. You do not need to upload a separate splash image — Android generates it automatically from the adaptive icon. For older Android versions, the platform uses the legacy icon centered on the background color configured in Builder Settings.

Uploading Icons

1. Open Builder Settings → Mobile → App Icons: From the Application Builder, click the gear icon → Mobile → App Icons.

2. Upload the iOS source icon: Click the iOS icon upload zone and select your 1024 × 1024 px PNG. The preview shows a rounded-corner simulation of how it will appear on a device.

3. Upload the Android Play Store icon: Click the Android icon upload zone and select your 512 × 512 px PNG.

4. Configure the adaptive icon: Upload the foreground layer PNG. Then either enter a hex color for the background or upload a background layer PNG. The preview shows the adaptive icon composited with a circular mask (the most common Android shape).

5. Upload PWA icons (optional but recommended): Upload the 192 × 192 px, 512 × 512 px, and 180 × 180 px PWA icons.

6. Configure the splash screen: Upload the splash screen image (2732 × 2732 px for iOS) and set the background color. Upload a dark-mode variant if your app supports dark mode.

7. Save and initiate a new build: Click Save. Icon changes are bundled into the next mobile build. Initiate a new build from the Deployments tab to apply your new icons.

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 the 1024 px PNG for iOS, scale down to 512 px for Android, and export at appropriate intermediate sizes. 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. 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.