この記事で紹介されていたInkscape用のテンプレートに若干の修正を加えつつ、Android/iOS用のアイコン画像を生成する手順をまとめた。

1. Inkscape で adaptive_icon_template.svg を開く

2. Backgroundレイヤーに、キャンバスいっぱいの矩形を描画し背景色を塗るか、背景画像を配置する

3. Foregroundレイヤーに、Android および iOS のガイドラインを参考にしながらアイコンをデザインする

4. Android用に最大サイズのアイコンを生成する

   1. GuidelinesレイヤーとMaskレイヤーを非表示にする
   2. PNG画像にエクスポートを開く
   3. エクスポート領域をページ、画像サイズを512px四方にして、icon_512.pngにエクスポート

5. (任意) Android用のアダプティブアイコン用のアイコンを生成する

   1. Foregroundレイヤーを非表示にする
   2. エクスポート領域をページ、画像サイズを432px四方にして、background_432.pngにエクスポート
   3. Foregroundレイヤーを表示し、Backgroundレイヤーを非表示にする
   4. エクスポート領域をページ、画像サイズを432px四方にして、foreground_432.pngにエクスポート

6. iOS用に最大サイズのアイコンを生成する

   1. Maskレイヤーを非表示にする
   2. Guidelinesの矩形ガイド線を選択
   3. Guidelinesレイヤーを非表示にする
   4. PNG画像にエクスポートを開く
   5. エクスポート領域を選択範囲、画像サイズを1024px四方にして、icon_1024.pngにエクスポート

Flutterでアプリを作成している場合、flutter_launcher_iconsを使用することで、予め用意しておいた画像から、Android/iOS用のアイコンを自動生成することができる、

1. 生成したアイコンを assets/icons/ 配下に配置

2. pubspec.yamlを以下のように修正

   dev_dependencies:
     flutter_test:
       sdk: flutter
     # 以下を追加
     # 必要に応じて ^0.9.2 のようにバージョンを指定する
     flutter_launcher_icons:
   
   # 以下をファイル末尾に追加
   flutter_icons:
     ios: true
     android: true
     remove_alpha_ios: true
     image_path_ios: "assets/icons/icon_1024.png"
     image_path_android: "assets/icons/icon_512.png"
     # 以下はAndroidのアダプティブアイコン対応の場合のみ
     adaptive_icon_foreground: "assets/icons/foreground_432.png"
     adaptive_icon_background: "assets/icons/background_432.png"

3. 以下のコマンドを実行することで、各PF向けのアイコンが生成される

   flutter pub pub run flutter_launcher_icons:main

• Android
  • Product icons - Material Design
  • アダプティブ アイコン  |  Android デベロッパー  |  Android Developers
• iOS
  • App Icon - Icons and Images - iOS - Human Interface Guidelines - Apple Developer
• Graphic design for Android developers: Creating the ideal app icon
• 【Flutter】アプリアイコンをiOSとAndroid用に同時に一括生成する｜Flutterラボ｜note