Let’s agree that adding icons for each platform is tedious work in Flutter, especially when we have to update different configs and sizes for each platform.

Thanks to @Mark O’Sullivan we have a package to solve this exact situation. Tada🎉 introducing flutter_launcher_icons. At the time of writing this article flutter_launcher_icons@v0.10 supports Android, IOS, Web and Windows.

Let’s get started.

Add flutter_launcher_icons package

Since we won’t be importing any files from flutter_launcher_icons package we will be adding it as a dev_dependencies. You can add it by running this command in your flutter project root directory

flutter pub add flutter_launcher_icons --dev

After running this command your pubspec.yaml should look like this

# pubspec.yaml
dev_dependencies:
  # at the time of writing this post this is the latest version
  flutter_launcher_icons: ^0.10.0

Create configuration file

Now create a configuration file with name flutter_launcher_icons.yaml in your project root directory. In this file we define all the configs related to the flutter_launcher_icons.

flutter_icons:
  #  Your configs goes here

Let’s add some android configs

Adding Android Config

We need to add following keys under flutter_icons

  • android: Set this to true (This takes either a bool or a relative path to icon.)
  • image_path_android: Add image path here ./dart_icon.png (This takes relative path to android specific icon.)
  • min_sdk_android: Set your minSdk version here (Optional This is your android minSdk version, by default flutter_launcher_icons uses 21.)

In case your minSdkVersion is 26 or greater you can add adaptive icons with configs.

  • adaptive_icon_foreground: This takes your foreground image file path
  • adaptive_icon_background: This takes backgorund image file path

Note: Adaptive Icons will only be generated when both adaptive_icon_background and adaptive_icon_foreground are specified.

After adding this configs your flutter_launcher_icons.yaml should look like this.

# flutter_launcher_icons.yaml

flutter_icons:
  android: true
  image_path_android: "./dart_icon.png"
  min_sdk_android: 21
  adaptive_icon_foreground: "#FFFFFF"
  adaptive_icon_background: "./dart_icon.png"

Adding IOS Config

We follow same steps as android but adding ios configs under flutter_icons.

  • ios: Set this to true (This takes either a bool or a relative path to icon.)
  • image_path: Add IOS relative image path here
  • remove_alpha_ios: Set this to true so you can publish your app to appstore

After adding IOS configs your flutter_launcher_icons.yaml should look like this.

# flutter_launcher_icons.yaml

flutter_icons:
  # ... Other configs
  ios: true
  image_path_ios: "./dart_icon.png"
  remove_alpha_ios: true

Adding Web Config

Unlike Android and IOS web config goes under flutter_icons.web

  • generate: Set this to true if you want to generate icons for web platform
  • image_path: Add your web icon image path here
  • background_color: This takes a hexcolor and sets the placeholder background color for the application page to display before its stylesheet is loaded. more
  • theme_color: This takes a hexcolor and sets the default theme color for the application. This sometimes affects how the OS displays the site. more

After adding Web configs your flutter_launcher_icons.yaml should look like this.

# flutter_launcher_icons.yaml

flutter_icons:
  # ... Other configs
  web:
    generate: true
    image_path: "./dart_icon.png"
    background_color: "#FFFFFF"
    theme_color: "#0175C2"

Adding Windows Config

Adding Windows configs is same as Web platform instead of flutter_icons.web we will be adding them under flutter_icons.windows

  • generate: Set this to true if you want to generate icons for Windows platform
  • image_path: Add your web icon image path here
  • icon_size: The icon size to generate for windows. This value should be within the bound of this constrains 48<=icon_size<=256. By default it is set to 48.

After adding Windows configs flutter_launcher_icons.yaml should look like this.

# flutter_launcher_icons.yaml

flutter_icons:
  # ... Other configs
  windows:
    generate: true
    image_path: "./dart_icon.png"
    icon_size: 48

Final Config

After adding all configs this is how your flutter_launcher_config.yaml should look.

# flutter_launcher_icons.yaml

flutter_icons:
  # Android
  android: true
  image_path_android: "./dart_icon.png"
  min_sdk_android: 21
  adaptive_icon_foreground: "./dart_icon.png"
  adaptive_icon_background: "./dart_icon.png"
  # IOS 
  ios: true
  image_path_ios: "./dart_icon.png"
  remove_alpha_ios: true
  # Web
  web:
    generate: true
    image_path: "./dart_icon.png"
    background_color: "#FFFFFF"
    theme_color: "#0175C2"
  # Windows
  windows:
    generate: true
    image_path: "./dart_icon.png"
    icon_size: 48

If you are done with adding config lets move to the icon generation.

Generating icons

After adding configs to generate icons we need to run

flutter pub run flutter_launcher_icons:main

Output

$ flutter pub run flutter_launcher_icons:main
  ════════════════════════════════════════════
     FLUTTER LAUNCHER ICONS (v0.10.0)
  ════════════════════════════════════════════

• Creating default icons Android
• Overwriting the default Android launcher icon with a new icon
• Creating adaptive icons Android
• Overwriting default iOS launcher icon with new icon
Creating Icons for Web...
Creating Icons for Windows...

✓ Successfully generated launcher icons

Icons

Icon on Web Icon on Web

Icon on Windows Icon on Windows