Flutterでアプリアイコンを変更する方法【おすすめサービスも紹介】

簡単でかつ高品質なアプリアイコンの設定方法をご紹介します。また、アプリアイコンを設定する上でおすすめのサービスも漏れなくご紹介します。（基本無料）

手順は以下

Flutterでアプリアイコンを変更する方法【手順】

手順は以下の3ステップ

順に詳しく見ていきます。

まずは、基礎となるアプリアイコンを作成します。この時、画像サイズが「1024×1024」になるようにしましょう。

アプリアイコンを作成する上でおすすめのサービスはCanvaです。

Canvaにアクセスしたら、以下のように、1024×1024でいい感じのアイコン画像を作成しましょう。

実は、アプリのアイコンは、様々な解像度の端末に対応する必要があるために、複数の解像度の画像ファイルを用意する必要があります。

上記を一括で生成してくれるツールがApp icon Generatorです。（神様）

使い方はめちゃくちゃ簡単です。

作成した、1024×1024のPNG画像を選択して、右下のGenerateボタンを押すだけでOKです。

「Assets.xcassets」フォルダを、flutterプロジェクトの「ios>Runner」配下に格納します。

以下のようになっていればOK。

「mipmap-Xxx」フォルダ5つを、flutterプロジェクトの「android>app>src>main>res」配下に格納します。

以下のようになっていればOK。

本多

これだとAndroidのアイコンが小さくなってしまう時があるんですよね…（詳細不明）

なので、対策を以下に書きました。

手順は以下の5ステップ

flutterプロジェクトの「android>app>src>main>res」を右クリックして、「New>Image Asset」をクリックします。

画像のように、Pathに作成した1024×1024のアイコン画像を指定します。

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

Background LayerダブのSource AssetのAsset TypeをColorにチェックをして、カラーを調整します。

画像右に示すように、丸く切り取られたアイコンのはみ出た部分に、色が出てしまう場合があります。（詳しい人教えて）

なので、自分は背景色を白（FFFFFF）に設定しています。

あとは、Nextボタン→FinishボタンでOKです。

アプリアイコンを変更する手順は以下の3ステップ

Androidのアイコンが小さく表示されてしまう場合の対処手順は以下の5ステップ

ここまで読んでいただきありがとうございます。