Android のアプリアイコンを作るときにどういった素材をどのサイズで作るといいか、というのをまとめています。
開発する時やデザイナーに共有する資料として参考にしてもらえるといいかなと思います。
Android のアプリの仕組み
Android のアプリアイコンは Adaptive アイコンという前面 (foreground) と背面 (background) の 2 層の構造になっています。
ランチャーアプリなどではアイコン移動する時などに前面と背面で異なるインタラクションが適用されたりします。
また Adaptive アイコンは端末上でユーザの設定や OS メーカーによってアイコンの形が変形します。
アイコン作成に必要なリソースとセーフエリア
foreground と background 2 つの画像リソースを用意して、Android Studio 上でインポートすることでアプリアイコンを追加することができます。
リソースの種類は SVG or PNG で用意する必要があります。
SVG の場合
SVG の場合は画像サイズが小さくでも崩れることがないので以下のサイズで作成すれば OK です。
画像サイズが小さくて扱いにくい場合は後述する PNG の方のサイズで作成することもできます。
注意点として、SVG で作成する場合にアプリアイコン側が複雑なグラデーションやマスクはサポートしていない可能性があるため、その場合は PNG で作成する必要があります。
- foreground
- 画像サイズ 108×108px
- 中央から 66px の円の中はセーフエリア
- background
- 画像サイズ 108×108px
- 表示される最大領域は中央から 72×72px の四角
PNG の場合
SVG のサイズで PNG を作成してしまうと解像度の低いアイコンができてしまうため、画像サイズを調整する必要があります。公式のドキュメントで使われるサイズは dp (密度非依存ピクセル)のため、実ピクセルとして扱うときに係数が必要になるためです。
ここでは Android の解像度基準である xxxhdpi (4倍レイアウト) を想定したサイズにしています。
- foreground
- 画像サイズ 432×432px
- 中央から 264px の円の中はセーフエリア
- background
- 画像サイズ 432×432px
- 表示される最大領域は中央から 288×288px の四角
イメージ
foreground は以下の画像で、グレーのエリアが画像サイズ(可視化のために塗りつぶしているのであって、実際は透過になるはずです)、赤枠の円がセーフエリア、その中にアイコンを配置する形になります。
background はグレーのエリアが画像サイズ、緑のエリアが表示される最大領域になります。
緑のエリアの最大領域ははみ出して画像全体に塗りつぶしや描画があってもクロップされます。
これをインポートするとこのようになります。
微調整
基本的には上記のサイズで作成した場合、エンジニアがインポートするだけになりますが、場合によってはインポート時に foreground をスケールさせて微調整することも可能です。
アプリへインポートするときに、デザイナーにプレビューを確認してもらうといいでしょう。
オプション
Themed Icon
Android 13 以降で追加された、アプリのアイコンをデバイスのカラーで統一するために使用するアプリアイコンです。
Pixel デバイスの Android 16 QPR 2 以降ではアプリアイコンが Themed Icon が対応していなくても自動でアプリアイコンが Themed Icon になります。(アプリアイコンが自動で塗りつぶされる)
このアイコンを用意する時は、背景透過、単色の foreground と同じサイズでセーフエリアを考慮したアイコンを作ります。background はシステム側が自動でデバイスのテーマ色に置き換えるため、ロゴ部分のみの単色にする必要があります。
ストアアイコン
ストアアイコンはアプリアイコンをインポートする際にストア用サイズ(512×512px)のアイコンが生成されます。
生成されたアイコンを使うでも、独自のアイコンを使うでもどちらでも設定可能ですが、ストアアイコンは独自で角丸が適用されたりするので注意が必要です。
リンク