Flutter Splash Screen and App Icon: The Complete Setup Guide

The first two things a user sees are your app icon on their home screen and your splash screen while the app opens. A new Flutter project gives you the blue Flutter logo and a plain white screen. Shipping with those is the fastest way to look unfinished.

In this guide you will:

• Replace the app icon for iOS, Android (including adaptive icons) and web
• Add a native splash screen that shows instantly, with no white flash
• Handle the Android 12+ splash screen rules
• Keep the splash visible while your app loads data

Part 1: The app icon

Prepare one image

You need one square PNG:

• 1024 × 1024 pixels
• No rounded corners. iOS and Android cut the shape themselves. If you round the corners, you get odd edges.
• No transparency for iOS. The App Store rejects icons with transparent pixels.
• Keep the logo away from the edges. Android adaptive icons can crop up to a third of the image into a circle, squircle or teardrop.

Option A: The App Icon Generator (no setup)

I built a free Flutter App Icon Generator for this. Upload your 1024px image and download a ZIP that contains:

• ios/Runner/Assets.xcassets/AppIcon.appiconset with all 19 sizes and Contents.json
• android/app/src/main/res/mipmap-* with every density, plus adaptive icon files for Android 8+
• web/favicon.png and the web icons
• A 512 × 512 icon for the Play Store listing

Unzip it over your Flutter project's root folder and the files land in the right places. The preview shows how the icon looks as a circle, a rounded square and an iOS icon before you commit to it.

Option B: flutter_launcher_icons (command line)

If you change icons often or have several app flavors, use the package. Add to pubspec.yaml:

dev_dependencies:
  flutter_launcher_icons: ^0.14.0

flutter_launcher_icons:
  image_path: "assets/icon/icon.png"
  android: true
  ios: true
  remove_alpha_ios: true
  adaptive_icon_background: "#FFFFFF"
  adaptive_icon_foreground: "assets/icon/foreground.png"

Then run:

flutter pub get
dart run flutter_launcher_icons

Rename the app

While you are here, change the name under the icon:

• Android: android:label in android/app/src/main/AndroidManifest.xml
• iOS: CFBundleDisplayName in ios/Runner/Info.plist

See the new icon

Icons are cached. If you still see the old one, uninstall the app from the device or emulator and run it again.

Part 2: The splash screen

Why a native splash?

When your app starts, the operating system shows a launch screen before Flutter has loaded. That is the white screen you see. A splash screen made with Flutter widgets cannot replace it, because Flutter isn't running yet. You must configure the native launch screen.

The flutter_native_splash package generates it for both platforms from a few lines of YAML.

Step 1: Add the package

flutter pub add flutter_native_splash

Step 2: Configure it

Create flutter_native_splash.yaml in your project root:

flutter_native_splash:
  color: "#FFFFFF"
  image: assets/splash/logo.png

  color_dark: "#121212"
  image_dark: assets/splash/logo_dark.png

  android_12:
    color: "#FFFFFF"
    image: assets/splash/logo_android12.png
    color_dark: "#121212"
    image_dark: assets/splash/logo_android12_dark.png

  fullscreen: true

• color is the background, image is the centered logo.
• The _dark versions are used when the phone is in dark mode. If your app supports dark mode, set them so users don't get a white flash at night.

Step 3: Generate

dart run flutter_native_splash:create

Run it again any time you change the YAML. Then stop the app completely and start it again. Hot reload doesn't show launch screen changes.

The Android 12 rules

Since Android 12, Android shows its own splash screen for every app, and you can't fully replace it. You can only choose:

• A background color
• A centered icon, shown inside a circle

The icon image should be 1152 × 1152 pixels with the logo inside the middle 768 pixels; anything outside is cut off by the circle. That's why the config has a separate android_12 image. Using your normal wide logo there is the most common reason for a cropped Android splash.

Part 3: Keep the splash while loading

Often you need to load something before the first screen: the logged-in user, saved settings, remote config. You can keep the native splash on screen until you're ready:

import 'package:flutter/material.dart';
import 'package:flutter_native_splash/flutter_native_splash.dart';

Future<void> main() async {
  final binding = WidgetsFlutterBinding.ensureInitialized();
  FlutterNativeSplash.preserve(widgetsBinding: binding);

  await loadSettings(); // your startup work

  runApp(const MyApp());
  FlutterNativeSplash.remove();
}

Future<void> loadSettings() async {
  await Future.delayed(const Duration(milliseconds: 500));
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: Scaffold(body: Center(child: Text('Home'))));
  }
}

Keep this short: under a second or two. If startup takes longer, show your first screen with a loading indicator instead. A splash that never goes away feels like a frozen app.

Do you need an animated splash?

Many apps show a second, animated splash made in Flutter after the native one (a logo that scales, then fades). It looks nice in videos, but every second on a splash is a second the user waits. If you add one, keep it under one second and never block the app on it.

Common mistakes

The old icon still shows. Uninstall the app and run it again, or restart the emulator's launcher.

App Store rejects the icon. It has transparency. Use the App Icon Generator (it removes the alpha channel for iOS) or set remove_alpha_ios: true.

The logo is cut off on Android 12+. Use a separate android_12 image with the logo inside the center circle.

The splash doesn't change. Run dart run flutter_native_splash:create again, then do a full restart, not a hot reload.

Next steps

With a real icon and splash, your app is almost store-ready. Next, build the release APK and App Bundle, and create your store images with the free App Store screenshot generator.

Summary

• Start from one 1024 × 1024 square icon with no rounded corners or transparency.
• Generate all sizes with the App Icon Generator or flutter_launcher_icons.
• Use flutter_native_splash for the launch screen, with a separate Android 12 image and dark-mode versions.
• Use FlutterNativeSplash.preserve and remove to keep the splash while short startup work runs.