• 2025/4/10
• 4分

【Flutter/Dart】アプリアイコンを設定する方法！flutter_launcher_icons

＼ アプリをリリースしました ／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

環境

• Android Studio：Narwhal Feature Drop
• Xcode：26.0.1
• Flutter：3.29.2
• Dart：3.7.2
• flutter_launcher_icons：^0.14.3
• Mac M1：Sequoia 15.6.1

FlutterでiOS/Androidのアプリアイコンを設定する方法

Flutterで開発しているiOS/Androidのアプリアイコンを設定するにはflutter_launcher_iconsパッケージを使用します。このパッケージを使用することで1つの元画像から自動でサイズ別アイコンが生成され、iOS/Androidそれぞれのプロジェクトに設定してくれます。

flutter_launcher_iconsの使い方

1. 画像を用意する(1024 x 1024px)
2. 画像をプロジェクトに追加
3. flutter_launcher_iconsの導入&セットアップ
4. コマンドを実行

画像を用意する(1024 x 1024px)

まずはアプリのアイコン画像を作成します。作成する画像サイズは「1024 x 1024px」の1枚だけでOKです。iOS/Androidそれぞれにガイドラインが定められているので、違反しないように作成するようにしてください。詳細は以下の記事を参考にしてください。

画像をプロジェクトに追加

作成した画像をプロジェクトに配置します。特に指定はないですがlibと同階層にassetsディレクトリを作成しその中にimages/app_icon.pngとして追加しておきました。

Flutter アプリ
├── android
├── ios
├── lib
│
├── assets
│     └── images
│            └── app_icon.png ← ココ
│
└── pubspec.yaml

flutter_launcher_iconsの導入&セットアップ

pub.dev：flutter_launcher_icons

Flutterでflutter_launcher_iconsを利用できるようにするために以下のコマンドを実行してパッケージを導入します。

$ flutter pub add flutter_launcher_icons

続いて設定をしていきます。公式ドキュメントを見るとdart run flutter_launcher_icons:generateコマンドを実行して専用のyamlファイルを作成する方法と「pubspec.yaml」ファイルに設定を追加する方法の2つがあります。今回は「pubspec.yaml」に追加していきます。

pubspec.yaml
// 〜〜〜〜〜〜
dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.8
  flutter_launcher_icons: ^0.14.3

dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_lints: ^5.0.0
// アイコン自動生成設定
flutter_icons:
  ios: true
  android: true
  image_path_ios: "assets/images/app_icon.png" // 画像パス
  image_path_android: "assets/images/app_icon.png" // 画像パス
  adaptive_icon_background: '#000000'
  adaptive_icon_foreground: "assets/images/app_icon.png" // 画像パス
  adaptive_icon_padding: true

flutter:
  uses-material-design: true

設定項目の詳細は後述しています。

コマンドを実行

設定の追加が完了したら以下のコマンドを実行します。すると元画像を元に自動で必要なサイズのアイコンを生成、設定までしてくれます。なので後はビルドするだけでアプリアイコンが変更したものに変わってくれます。

$ flutter pub run flutter_launcher_icons:main

Deprecated. Use `dart run` instead.
This command is deprecated and replaced with "flutter pub run flutter_launcher_icons"
  ════════════════════════════════════════════
    FLUTTER LAUNCHER ICONS (v0.14.3)                               
  ════════════════════════════════════════════
  

⚠ Warning: flutter_icons has been deprecated please use flutter_launcher_icons instead in your yaml files
• Creating default icons Android
• Overwriting the default Android launcher icon with a new icon
• Creating adaptive icons Android
• Updating colors.xml with color for adaptive icon background
• Creating mipmap xml file Android

WARNING: Icons with alpha channel are not allowed in the Apple App Store.
Set "remove_alpha_ios: true" to remove it.

• Overwriting default iOS launcher icon with new icon
No platform provided

✓ Successfully generated launcher icons

flutter_launcher_iconsの設定

※1 Android 8.0（API 26）以降で使用される「アダプティブアイコン」用。

※2 iOSはAppleの仕様により透過PNG不可なのでremove_alpha_ios: trueにするのが安全。

iOSアイコンのDark / Tintedに対応する

iOS18以降からアプリアイコンは「Light」、「Dark」、「Tinted」の3つのモードが用意「Tinted」に関しては自分の好きな色味をアプリアイコンに適応させることが可能になりました。

各画像の用意要件に関しては以下の記事を参考にしてください。

flutter_launcher_iconsでもimage_path_ios_dark_transparentとimage_path_ios_tinted_grayscaleを使用することで「Dark」、「Tinted」に対応した設定を行うことが可能です。

pubspec.yaml
flutter_icons:
  android: true
  ios: true
  # iOS Lightアイコン
  image_path_ios: "assets/images/app_icon.png"
  # iOS Darkアイコン
  image_path_ios_dark_transparent: "assets/images/app_icon_dark.png"
  # iOS Tintedアイコン
  image_path_ios_tinted_grayscale: "assets/images/app_icon_tinted.png"
  image_path_android: "assets/images/app_icon.png"
  adaptive_icon_background: '#000000'
  adaptive_icon_foreground: "assets/images/app_icon.png"
  adaptive_icon_padding: true

設定をしたら再度flutter pub run flutter_launcher_icons:mainコマンドを実行すればOKです。

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。