Adding app icons to our Flutter project is very simple thanks to the the flutter_launcher_icons plugin. Using this, all the different shape/size icons for iOS and Android will be generated automatically. Similarly, flutter_native_splash library takes care of the splash screen so that we avoid the blank view that appears for a few moments when starting up.

Step 1

The Icon Images

For iOS:

We need to specify just one image for the iOS platform. Create a PNG file (no alpha / no transparency) with 1024×1024 dimension. Let us name this app_icon.png and put it in a folder named images in our flutter project root directory.

For Android:

Android has adaptive launcher icons, so we will specify an image (or a color) for the background and an image for the foreground of the icon. For this example I will use a color for the background. So just make a PNG image file of your icon with transparent background. Let us save this as app_icon_foreground.png in the images folder.

Fallback icon:

For old android devices which do not support adaptive icons, you can create a third icon image, same as the iOS icon but with rounded corners and transparency, for good effect. In this example I will use the iOS icon itself as the fallback icon. You can do the same.

Step 2

Add the plugins

Open your pubspec.yaml and add the following plugin to dev_dependencies:

dev_dependencies:
  flutter_launcher_icons: ^0.7.4
  flutter_native_splash: ^0.1.9

Run the command

$ flutter pub get

Step 3

Add configuration for icons

In pubspec.yaml, we’ll need to provide the flutter_icons configuration.

We will set the ios icon in image_path_ios, the adaptive icon background and foreground in adaptive_icon_background and adaptive_icon_foreground respectively. And the fallback icon in image_path_android. The boolean values for ios and android properties tells the flutter application whether or not to generate icons for the given platform.

flutter_icons:
  ios: true
  android: true
  image_path_ios: "images/app_icon.png"
  image_path_android: "images/app_icon.png"
  adaptive_icon_background: "#ffffff" # or image
  adaptive_icon_foreground: "images/app_icon_foreground.png"

Add configuration for splash screen

Similarly, we set the attributes for the splash

flutter_native_splash:
  image: images/logo.png
  color: "#ffffff"

Step 4

Generate icons

Now run the following two commands to generate the icons.

flutter packages get
flutter packages pub run flutter_launcher_icons:main

Generate Splash 

flutter pub pub run flutter_native_splash:create

You’re done! Run the app and you should see the new app icon for your app, and the splash screen.

…