Setting a Flutter App's Icon and Name with flutter_launcher_icons

📅

loading..🐩🐩🐩🐩

Before getting started 🔗

This post was written for Flutter 3.24.
It assumes Flutter is already installed.

Overview 🔗

A new Flutter project uses the Flutter logo as its app icon by default.

You may want to change it.

The flutter_launcher_icons package is used for this.

It makes configuring a Flutter project's app icon and name easier.

Changing the app icon 🔗

1. Installing the package 🔗

Install flutter_launcher_icons.

flutter pub add flutter_launcher_icons

2. Creating the configuration file 🔗

Enter the following command to generate a configuration file.

dart run flutter_launcher_icons:generate

This creates the following file.

flutter_launcher_icons.yaml

# flutter pub run flutter_launcher_icons
flutter_launcher_icons:
  image_path: "assets/icon/icon.png"
 
  android: "launcher_icon"
  # image_path_android: "assets/icon/icon.png"
  min_sdk_android: 21 # android min sdk min:16, default 21
  # adaptive_icon_background: "assets/icon/background.png"
  # adaptive_icon_foreground: "assets/icon/foreground.png"
  # adaptive_icon_monochrome: "assets/icon/monochrome.png"
 
  ios: true
  # image_path_ios: "assets/icon/icon.png"
  remove_alpha_channel_ios: true
  # image_path_ios_dark_transparent: "assets/icon/icon_dark.png"
  # image_path_ios_tinted_grayscale: "assets/icon/icon_tinted.png"
  # desaturate_tinted_to_grayscale_ios: true
 
  web:
    generate: true
    image_path: "path/to/image.png"
    background_color: "#hexcode"
    theme_color: "#hexcode"
 
  windows:
    generate: true
    image_path: "path/to/image.png"
    icon_size: 48 # min:48, max:256, default: 48
 
  macos:
    generate: true
    image_path: "path/to/image.png"

3. Preparing an icon image 🔗

Place the image at assets/logo/icon.png.

If you do not have an image ready, you can create an icon using the following sites.

appicon↗ → When you already have a base image.
icon Kitchen↗ → Create an icon without a base image.

4. Applying the icon 🔗

Edit flutter_launcher_icons.yaml.

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

Run the following command to apply the icon.

flutter pub get
dart run flutter_launcher_icons

The icon has now changed.

Next, let's change the app name.

Changing the app name 🔗

1. Android 🔗

Open android/app/src/main/AndroidManifest.xml and edit it as follows.

Enter the app name in android:label.

<application
		android:label="앱 이름"
		android:icon="@mipmap/ic_launcher">

2. iOS 🔗

Open ios/Runner/Info.plist and edit it as follows.

Enter the app name in CFBundleDisplayName.

<key>CFBundleDisplayName</key>
<string>앱 이름</string>

Conclusion 🔗

References 🔗

Setting a Flutter App's Icon and Name with flutter_launcher_icons | PromleeBlog