DEV Community

Cover image for Flutter Icon Generation: One Codebase, Every Platform
Roboticela
Roboticela

Posted on

Flutter Icon Generation: One Codebase, Every Platform

Flutter's promise of "write once, run anywhere" is one of the most compelling propositions in modern mobile development. A single Dart codebase can produce apps for iOS, Android, web, Windows, macOS, and Linux. But this cross-platform power comes with a cross-platform icon challenge: Flutter apps need properly sized icons for every target platform, and each platform has different requirements, folder locations, and file naming conventions.

Many Flutter developers discover the icon generation problem during their first build attempt, when the default Flutter icon appears on their device. While the default blue Flutter logo is harmless during development, shipping it to production is a cardinal sin of app publishing. Every production Flutter app must have custom icons that are properly sized for all target platforms.

The flutter_launcher_icons Package

The most widely used approach to Flutter icon generation involves the flutter_launcher_icons pub package. Configured via pubspec.yaml, this tool takes a source image and generates all required icon sizes for iOS and Android. However, it requires correct configuration, a properly sized source image, and — critically — it only handles iOS and Android by default. Web, Windows, macOS, and Linux each require separate consideration.

pubspec.yaml# flutter_launcher_icons configuration 
flutter_launcher_icons: android: "launcher_icon" ios: true image_path: 
"assets/icon/app_icon.png" min_sdk_android: 21 web: generate: true 
image_path: "assets/icon/app_icon.png" windows: generate: true 
image_path: "assets/icon/app_icon.png" icon_size: 48 macos: generate: 
true image_path: "assets/icon/app_icon.png"
Enter fullscreen mode Exit fullscreen mode

Flutter Web Icons

Flutter web generates a PWA-capable web application. Its icon requirements mirror standard PWA specifications: a manifest.json with correctly sized icon entries, favicons in multiple sizes, and Apple touch icons for iOS Safari. The icons are placed in the web/icons/ directory within your Flutter project. Missing web icons prevent your Flutter web app from being installable as a PWA on mobile devices.

Flutter Windows and macOS

Flutter's desktop platforms inherit the icon requirements of their respective operating systems. Flutter Windows needs an ICO file at windows/runner/resources/app_icon.ico. Flutter macOS needs an ICNS file at macos/Runner/Assets.xcassets/AppIcon.appiconset/. Each location has strict expectations, and the files must be regenerated from your source any time you update the icon design.

Rather than managing this complexity manually across all Flutter platforms, Iconify provides Flutter-ready icon packages. Learn more about Flutter support and all other supported frameworks at iconify.roboticela.com.

Flutter Icons for Every Platform
iOS, Android, Web, Windows, macOS — all from one source image.

Flutter Support
Generate Icons

Top comments (0)