/app-icon-template-for-inkscape

InkscapeでAndroid/iOS共通デザインのアイコンを作成するためのテンプレート

InkscapeでAndroid/iOSアプリの共通アイコンを作成するテンプレート

この記事で紹介されていた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でAndroid/iOS用のアイコンを自動生成する

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

参考