簡単でかつ高品質なアプリアイコンの設定方法をご紹介します。また、アプリアイコンを設定する上でおすすめのサービスも漏れなくご紹介します。(基本無料)
Flutterでアプリアイコンを変更する方法【手順】
- 1024×1024のPNG画像を作成する
- App icon Generatorで各サイズのアイコン画像を作成する
- 画像ファイルをOSごとのプロジェクトフォルダに格納する
順に詳しく見ていきます。
1.1024×1024のPNG画像を作成する
まずは、基礎となるアプリアイコンを作成します。この時、画像サイズが「1024×1024」になるようにしましょう。
アプリアイコンを作成する上でおすすめのサービスはCanvaです。
Canvaにアクセスしたら、以下のように、1024×1024でいい感じのアイコン画像を作成しましょう。
2.App icon Generatorで各サイズのアイコン画像を作成する
実は、アプリのアイコンは、様々な解像度の端末に対応する必要があるために、複数の解像度の画像ファイルを用意する必要があります。
上記を一括で生成してくれるツールがApp icon Generatorです。(神様)
使い方はめちゃくちゃ簡単です。
作成した、1024×1024のPNG画像を選択して、右下のGenerateボタンを押すだけでOKです。

3.画像ファイルをOSごとのプロジェクトフォルダに格納する

【iOSの場合】
「Assets.xcassets」フォルダを、flutterプロジェクトの「ios>Runner」配下に格納します。
以下のようになっていればOK。

【Androidの場合】
「mipmap-Xxx」フォルダ5つを、flutterプロジェクトの「android>app>src>main>res」配下に格納します。
以下のようになっていればOK。


これだとAndroidのアイコンが小さくなってしまう時があるんですよね…(詳細不明)
なので、対策を以下に書きました。
【備考】Androidのアイコンが小さく表示されてしまう場合の対処
- 「Image Asset」を開く
- Pathに作成した1024×1024のアイコン画像を指定
- サイズを調整する
- 背景色を調整する
- Finishボタンを押下する
1.「Image Asset」を開く

flutterプロジェクトの「android>app>src>main>res」を右クリックして、「New>Image Asset」をクリックします。
2.Pathに作成した1024×1024のアイコン画像を指定

画像のように、Pathに作成した1024×1024のアイコン画像を指定します。
3.サイズを調整する

次に、Resizeのスライダーとアイコンサイズが、枠にピッタリ収まるように調整します。
4.背景色を調整する

Background LayerダブのSource AssetのAsset TypeをColorにチェックをして、カラーを調整します。
画像右に示すように、丸く切り取られたアイコンのはみ出た部分に、色が出てしまう場合があります。(詳しい人教えて)
なので、自分は背景色を白(FFFFFF)に設定しています。
5.Finishボタンを押下する
あとは、Nextボタン→FinishボタンでOKです。
まとめ:Flutterでアプリアイコンを変更する方法
- 1024×1024のPNG画像を作成する
- App icon Generatorで各サイズのアイコン画像を作成する
- 画像ファイルをOSごとのプロジェクトフォルダに格納する
- 「Image Asset」を開く
- Pathに作成した1024×1024のアイコン画像を指定
- サイズを調整する
- 背景色を調整する
- Finishボタンを押下する
ここまで読んでいただきありがとうございます。
コメント