Create Flutter icons for all target types with single png and flutter_launcher_icons

Creating a cross-platform app icon for Flutter can be easy.  Easy enough that it is embarrassing how long I looked away from adding app icons to my apps.

Creating an app icon across platforms is especially true if you avoid implementing many platform-specific customizations. You can convert a single PNG image into all the formats needed for Flutter Android, iOS, MacOS, Windows, and Web launcher icons using just one 1000x1000 pixel icon and flutter_launcher_icons.

Caveat

1. This walkthrough does not take into account different icons for light and dark
2. This does not have any Apple Glass handling

Create an app icon

Create a 1000x1000 pixel icon using the tool of your choice.  The icon at the top of the blog was created for fs-game-score using appicons.ai.

• I used https://appicons.ai, which I found via Reddit
• Mac users may be able to use something like Apple Icon Composer

Download the icon created in the step above. It should be a 1000x1000 PNG file.

Copy the icon to a place we can find it in the project

mkdirs -p assets/logos

cp <1000x1000 image>.png assets/logos

Add the image to the assets

Doing this will add approximately 1MB to your final app, as it will include the full-size log image in the assets bundle, which can be pulled into the application content on all platforms. Add the image to the assets block of your pubspec.yaml. The important part is the assets: block.

lutter:

# The following line ensures that the Material Icons font is

# included with your application, so that you can use the icons in

# the material Icons class.

uses-material-design: true

# To add assets to your application, add an assets section, like this:

assets:

- assets/logos/

Add flutter_launcher_icons to pubspec.yaml

Bring flutter_launcher_icons into the project. It should be a dev dependency.

flutter pub add flutter_launcher_icons --dev

flutter pub get

Create the correctly sized images and update Flutter projects

Use flutter_launcher_icons to create the appropriate icons and place them in the correct location. The GitHub project is at fluttercommunity/flutter_launcher_icons . I used these as guides:

• https://onlyflutter.com/how-to-change-the-launcher-icon-in-flutter/
• https://github.com/fluttercommunity/flutter_launcher_icons

You can put the configuration in its own file or add configuration to pubspec.yaml. I modified pubspect.yaml because I didn't want yet another file.

flutter_launcher_icons:

android: true

image_path_android: "assets/logos/flutter-phone-score.png"

ios: true

image_path_ios: "assets/logos/flutter-phone-score.png"

remove_alpha_ios: true

web:

generate: true

image_path: "assets/logos/flutter-phone-score.png"

background_color: "#hexcode"

theme_color: "#hexcode"

windows:

generate: true

image_path: "assets/logos/flutter-phone-score.png"

icon_size: 48 # min:48, max:256, default: 48

macos:

generate: true

image_path: "assets/logos/flutter-phone-score.png"

Use flutter_launcher_icons to configure everything with dart run flutter_launcher_icons

$dart run flutter_launcher_icons

Building package executable...

Built flutter_launcher_icons:flutter_launcher_icons.

════════════════════════════════════════════

FLUTTER LAUNCHER ICONS (v0.14.4)

════════════════════════════════════════════

• Creating default icons Android

• Overwriting the default Android launcher icon with a new icon

• Overwriting default iOS launcher icon with new icon

Creating Icons for Web... done

Creating Icons for Windows... done

Creating Icons for MacOS... done

✓ Successfully generated launcher icons

Results

Running flutter_launcher_icons generated 45 changes across my Android, iOS, MacOS, Windows, Linux, and Web targets.

Revision History

Created 2025 09