How to Brand Your Mobile App Before Launch

You've built the app. The features work. You're ready to ship.

Then you open App Store Connect and realize you need an app icon, screenshots, a promotional banner, a splash screen, and your in-app UI looks like three different developers built it (because three different developers built it).

Mobile app branding has more surface area than web apps. More required assets, stricter guidelines, and less room for "good enough." Here's how to get it right before launch.

The app icon: 1024px of pure pressure

Your app icon is the hardest branding challenge in software. It needs to:

• Be instantly recognizable at 60px on a home screen
• Look good next to Apple's and Google's polished first-party icons
• Communicate what your app does (or at least its personality)
• Not look like any of the other 5 million apps in the store

Apple requirements:

• 1024x1024px PNG, no transparency, no rounded corners (iOS adds them)
• No text (Apple explicitly discourages it)

Google requirements:

• 512x512px PNG, can use transparency
• Follows Material Design adaptive icon spec (foreground + background layers)

// For Expo/React Native projects
// app.json
{
  "expo": {
    "icon": "./assets/icon.png",           // 1024x1024
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#6366F1"
      }
    }
  }
}

Icon design rules:

• One symbol, not a scene. The best app icons are simple: a single shape, letter, or object.
• Use your primary brand color as the background.
• Avoid photorealism. Flat or semi-flat designs scale better.
• Test it on an actual home screen next to other apps. Does it hold up or disappear?

The logo generator creates icons that work at every size, but for mobile apps specifically, you'll want to verify the result looks good surrounded by the default iOS and Android app grids.

Splash screen: first impression, literally

The splash screen is the first thing users see after tapping your icon. It bridges the gap between "I tapped the app" and "the app loaded."

The right approach:

// app.json (Expo)
{
  "expo": {
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#6366F1"
    }
  }
}

Keep it simple:

• Your logo/icon centered on screen
• Your brand's primary color as the background
• Nothing else. No taglines, no loading bars, no animations that delay users.

/* If using react-native-splash-screen with custom styling */
.splash-container {
  flex: 1;
  background-color: #6366f1;
  justify-content: center;
  align-items: center;
}

Apple and Google both have guidelines saying splash screens should be minimal. Apple calls it a "launch screen" and explicitly says it's not a branding opportunity — it's a perceived-performance tool. Keep it clean.

The splash screen should match your app icon's color. If your icon has an indigo background, your splash screen should be indigo. This creates visual continuity from tap to load.

Store listing: your app's landing page

Your App Store and Play Store listings are conversion-critical. The branding rules from landing pages apply here, compressed into a smaller format.

Screenshots (the conversion driver)

Most users decide to install based on screenshots alone. They don't read your description.

Sizes:

• iPhone: 1290x2796px (6.7") and 1242x2208px (5.5")
• Android: At least 320px minimum, 3840px maximum per side
• Both: 2-8 screenshots, first two are most important

Screenshot branding rules:

1. Use a consistent frame around each screenshot — your brand color as background, device mockup optional.
2. Add a short headline on each screenshot (not describing UI, describing value).
3. Match the in-app UI in the screenshots. Don't fake it. Users will notice and leave bad reviews.
4. First screenshot should show the core experience.

┌────────────────────┐
│   Your brand color  │
│     background      │
│                     │
│  "Track every task  │
│   in one place"     │
│                     │
│  ┌──────────────┐   │
│  │              │   │
│  │  Actual app  │   │
│  │  screenshot  │   │
│  │              │   │
│  └──────────────┘   │
│                     │
└────────────────────┘

App description

Keep it scannable:

Track tasks, hit deadlines, ship faster.

• Create tasks in 2 taps
• Organize by project, label, or due date
• Sync across all your devices
• Dark mode and widgets included

Built for developers who want a task manager
that gets out of the way.

If you're working with Expo, your branding assets (icon, splash, adaptive icon) are all configured in app.json. Having a consistent brand system means these all share the same colors and visual language.

In-app consistency

This is where mobile branding gets hard. Your app has dozens of screens, and they all need to feel cohesive.

Define your system once:

// theme.ts — single source of truth
export const theme = {
  colors: {
    primary: '#6366f1',
    primaryForeground: '#ffffff',
    background: '#ffffff',
    foreground: '#0f172a',
    muted: '#f1f5f9',
    mutedForeground: '#64748b',
    border: '#e2e8f0',
    success: '#22c55e',
    warning: '#f59e0b',
    error: '#ef4444',
  },
  fonts: {
    regular: 'Inter_400Regular',
    medium: 'Inter_500Medium',
    semibold: 'Inter_600SemiBold',
    bold: 'Inter_700Bold',
  },
  radius: {
    sm: 6,
    md: 8,
    lg: 12,
    full: 9999,
  },
  spacing: {
    xs: 4,
    sm: 8,
    md: 16,
    lg: 24,
    xl: 32,
  },
} as const;

Then use it everywhere:

import { theme } from '../theme';
 
function PrimaryButton({ title, onPress }) {
  return (
    <TouchableOpacity
      onPress={onPress}
      style={{
        backgroundColor: theme.colors.primary,
        paddingVertical: 12,
        paddingHorizontal: 24,
        borderRadius: theme.radius.md,
      }}
    >
      <Text style={{
        color: theme.colors.primaryForeground,
        fontFamily: theme.fonts.semibold,
        fontSize: 16,
        textAlign: 'center',
      }}>
        {title}
      </Text>
    </TouchableOpacity>
  );
}

The consistency killer: ad-hoc color values. The moment someone writes backgroundColor: '#6366f1' instead of theme.colors.primary, you've created a maintenance problem. Lint rules or a shared component library prevent this.

Understanding what goes into a complete brand kit helps you define these tokens systematically instead of making them up screen by screen.

Dark mode on mobile

Both iOS and Android have system-level dark mode. Users expect your app to respect it.

// theme.ts — extended with dark mode
export const lightTheme = {
  colors: {
    primary: '#6366f1',
    background: '#ffffff',
    foreground: '#0f172a',
    muted: '#f1f5f9',
    mutedForeground: '#64748b',
    card: '#ffffff',
    border: '#e2e8f0',
  },
};
 
export const darkTheme = {
  colors: {
    primary: '#818cf8',
    background: '#0f172a',
    foreground: '#f1f5f9',
    muted: '#1e293b',
    mutedForeground: '#94a3b8',
    card: '#1e293b',
    border: '#334155',
  },
};

// App.tsx
import { useColorScheme } from 'react-native';
 
function App() {
  const colorScheme = useColorScheme();
  const theme = colorScheme === 'dark' ? darkTheme : lightTheme;
 
  return (
    <ThemeProvider value={theme}>
      <Navigation />
    </ThemeProvider>
  );
}

Mobile dark mode rules:

• Follow the system setting by default. Add a manual override in settings.
• Status bar color needs to change too. White text on dark, dark text on light.
• Navigation bar (bottom) should match your background color.
• Test on actual devices. Simulators don't perfectly represent OLED black.
• Your splash screen should also support dark mode (Expo handles this with splash.dark).

Typography on mobile

Mobile has tighter typography constraints than web. Screen space is limited, and readability at arm's length matters.

// Minimum sizes for mobile
const typography = {
  h1: { fontSize: 28, lineHeight: 34 },    // Screen titles
  h2: { fontSize: 22, lineHeight: 28 },    // Section headers
  body: { fontSize: 16, lineHeight: 24 },  // Default text
  caption: { fontSize: 13, lineHeight: 18 }, // Secondary info
  small: { fontSize: 11, lineHeight: 16 }, // Timestamps, metadata
};

Never go below 11px for any text. Apple's HIG recommends 17px for body text. Google's Material recommends 16px. These aren't suggestions — text below these sizes causes readability complaints and bad reviews.

Font loading in Expo:

import {
  useFonts,
  Inter_400Regular,
  Inter_600SemiBold,
  Inter_700Bold,
} from '@expo-google-fonts/inter';
 
function App() {
  const [fontsLoaded] = useFonts({
    Inter_400Regular,
    Inter_600SemiBold,
    Inter_700Bold,
  });
 
  if (!fontsLoaded) return <SplashScreen />;
 
  return <MainApp />;
}

Load fonts before hiding the splash screen. A flash of unstyled text on mobile is worse than on web because users notice the jank immediately.

Notifications and widgets

Your brand extends beyond the app itself:

Push notifications: Your app icon appears next to every notification. Make sure it's recognizable at the tiny notification tray size (typically around 24-36px).

Widgets (iOS/Android): If your app has widgets, they need to follow your brand system — same colors, fonts, and radius values. Widgets sit on the home screen next to other apps' widgets. Inconsistent branding here is very visible.

// widget configuration
const widgetStyles = {
  backgroundColor: theme.colors.background,
  borderRadius: 16,  // Match iOS widget radius
  padding: theme.spacing.md,
  fontFamily: theme.fonts.medium,
};

The pre-launch branding checklist

• App icon: 1024x1024 (iOS), 512x512 (Android), plus adaptive icon
• Splash screen: Logo + brand color, both light and dark variants
• Store screenshots: Branded frames with value-prop headlines
• Theme file: Single source of truth for colors, fonts, spacing, radius
• Dark mode: System-aware with manual override option
• Typography: Body text at least 16px, nothing below 11px
• Notification icon: Recognizable at 24px
• Store description: Scannable, branded voice

Ship with confidence

Mobile app branding has a lot of moving parts. Multiple icon sizes, two stores with different requirements, dark mode, splash screens, in-app consistency across dozens of screens. If you're building a mobile app, that's a lot of branding surface area to cover manually.

You can piece it all together manually, spending a weekend in Figma generating assets and testing color combinations.

Or you can describe your mobile app to OneMinuteBranding and get a complete brand system in 60 seconds. Colors, fonts, logo, icon variants, dark mode palette — all defined and ready to plug into your theme file.

$49, one-time. Your app gets a professional brand. You get your weekend back. And your users get an app that looks like a real product, not a side project.

Ship it.