Flutter - Change App Launcher Icon & Name (Android & iOS)

This tutorial explains you how to change the name and icon of a Flutter application for both Android and iOS

Change App Launcher Name

By default, the name on the launcher is your Flutter project name. To change the name displayed on Android or iOS application launcher, you need to change AndroidManifest.xml and Info.plist respectively.

Inside AndroidManifest.xml, find <application> tag. Change its android:label property with your desired app name.

android/app/src/main/AndroidManifest.xml

  <application
          android:name="io.flutter.app.FlutterApplication"
          android:label="Woolha App"
          android:icon="@mipmap/launcher_icon">

Inside Info.plist, find CFBundleName key and change its value which is inside string tag on the next line.

ios/Runner/Info.plist

  <key>CFBundleName</key>
  <string>Woolha App</string>

Change App Launcher Icon

There are some ways to change the app launcher icon.

Using `flutter_launcher_icons.yaml`

The easiest way is using a tool called flutter_launcher_icons.yaml

  dependencies:
    flutter_launcher_icons: ^0.7.2

  flutter_icons:
    android: true
    ios: true
    image_path: "assets/images/favicon.avif"

Below are the available config options:

Option	Description
`android/ios`	Values: `true`: Override the icon for the platform `false`: Not generating icons for the platform `{imagePath}`: Generate icon for the platform using to file on the specified path without removing the default icon.
`image_path`	Path of the icon
`image_path_android`	Path of the icon specific for Android (optional - override image_path is defined)
`image_path_ios`	Path of the icon specific for iOS (optional - override image_path is defined)
`adaptive_icon_background` (Android only)	Color code or path to image that will be used as background of adaptive icon
`adaptive_icon_foreground` (Android only)	Color code or path to image that will be used as foreground of adaptive icon

The path is relative from your project root. After that, run flutter pub get on your project directory or just press if you're using Android Studio while opening the pubspec.yaml file.

After the tool successfully installed and you've added the configuration, you can run flutter pub run flutter_launcher_icons:main. If the config is not in pubspec.yaml or flutter_launcher_icons.yaml, add -f {your config file name} flag to the command.

Basically, the tool is used to generate icons with different sizes for Android and iOS.

Using Android Studio's Asset Studio

Android Studio has built-in feature for changing Android app icons. Right click on the android folder, the choose New > Image Asset.

On the opened popup, select Launcher Icons on Icon Type. You can change the foreground layer, background layer, legacy icon, round icon as well as Google Play Store icon. It will automatically generate icons with different sizes for different pixel densities.

Change the icon manually

If the tools above doesn't work for you or maybe you need more customization, you can set the launcher icon manually.

For Android, go to android/app/src/main/res folder. You should see some folders beginning with mipmap-* which represent different pixel densities. Replace launcher_icon.png file in each folders to use custom icons.

For iOS, the icon config and files are located inside ios/Runner/Assets.xcassets/AppIcon.appiconset. The Contents.json file defines a list of icon images with different sizes and scales. The files are located in the same folder. It's recommended to follow the guideline for designing iOS icon.