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. This 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.

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 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:

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

Comments

Post a Comment

Popular posts from this blog

Installing the RNDIS driver on Windows 11 to use USB Raspberry Pi as network attached

Image
I do a lot of my development and configuration via ssh into my Raspberry Pi Zero over the RNDIS connection. Some models of the Raspberry PIs can be configured with  gadget drivers  that let the Raspberry pi emulate different devices when plugged into computers via USB. My favorite gadget  is the network profile that makes a Raspberry Pi look like an RNDIS-attached network device.  All types of network services travel over an RNDIS device without knowing it is a USB hardware connection. A Raspberry Pi shows up as a Remote NDIS (RNDIS) device when you plug the Pi into a PC or Mac via a USB cable. The gadget  in the Windows Device Manager picture shows this RNDIS Gadget connectivity between a Windows machine and a Raspberry Pi. The Problem Windows 11 and Windows 10 no longer auto-installs the RNDIS driver that makes magic happen. Windows recognizes that the Raspberry Pi is some type of generic USB COM device. Manually running W indows Update  or  Upd...
Read more

Understanding your WSL2 RAM and swap - Changing the default 50%-25%

Image
The Windows Subsystem for Linux operates as a virtual machine that can dynamically grow the amount of RAM to a maximum set at startup time.  Microsoft sets a default maximum RAM available to 50% of the physical memory and a swap-space that is 1/4 of the maximum WSL RAM.  You can scale those numbers up or down to allocate more or less RAM to the Linux instance. The first drawing shows the default WSL memory and swap space sizing. The images below show a developer machine that is running a dev environment in WSL2 and Docker Desktop.  Docker Desktop has two of its own WSL modules that need to be accounted for.  You can see that the memory would actually be oversubscribed, 3 x 50% if every VM used its maximum memory.  The actual amount of memory used is significantly smaller allowing every piece to fit. Click to Enlarge The second drawing shows the memory allocation on my 64GB laptop. WSL Linux defaul...
Read more

Get AI code assist VSCode with local LLMs using LM Studio and the Continue.dev extension - Windows

Image
This is about running VSCode AI code assist locally replacing Copilot or some other service.  You may run local models to guarantee none of your code ends up on external servers. Or, you may not want to maintain an ongoing AI subscription. We are going to use  LM  Studio and VS Code.  This was tested on Windows 11 with an RTX 3060 TI with 8GB of VRAM. 8GB really limits the number and size of the models we can use. LM Studio's simple hosting model of 1 LLM and an embedding works for us in this situation.  You want a big card. 8GB is a tiny card. Related blog articles and videos Several related blogs and videos that cover VSCode and local LLMs Blog  Get AI code assist VSCode with local LLMs using Ollama and the Continue.dev extension - Mac Get AI code assist VSCode with local LLMs using LM Studio and the Continue.dev extension - Windows Rocking an older Titan RTX 24GB as my local AI Code assist on Windows 11, Ollama and VS Code YouTube Video  Using loc...
Read more