K-magpie › カササギツール › アプリアイコン生成
正方形の画像1枚から、Androidの全mipmap密度、アダプティブアイコンのレイヤー、Play Store用の512pxアイコン、iOSのAppIconセット、Web用ファビコンを作り、フォルダ構成を整えた状態でZIPにまとめます。ファイルはブラウザの外に送信されません。アップロードも登録も不要です。
絵柄が端に詰まって窮屈に見えるときは、余白を足してください。アダプティブアイコンのレイヤーには、セーフゾーンに合わせた内側の余白が別途自動で入るので、ここで考慮する必要はありません。
iOSのApp Store用アイコン(1024px)にはアルファチャンネルを含めることができません。元画像に透明な部分がある場合は、背景をオンにしてください。
1024pxの正方形PNG1枚から、Android・iOS・ファビコンのアイコン一式を作成し、フォルダ構成を整えたZIPで受け取れます。アダプティブアイコンのレイヤーにはセーフゾーン分の余白が自動で入るので、丸いランチャーマスクで絵柄が欠けることもありません。アップロードは一切行わないため、未公開のアートワークがお使いの端末の外に出ることはありません。
まず1024×1024の正方形PNGを用意します。元画像が大きいほど、どのサイズに縮小してもきれいに仕上がるので、ベクター系のツールから1024pxで直接書き出すといちばんシャープになります。必要なセットを選んでダウンロードを押すと、フォルダ分け済みのZIPが手に入ります。Androidのファイルはapp/src/main/res/に入れ、iOSではアセットカタログ内のAppIcon.appiconsetフォルダを丸ごと置き換えてください。
データはどこにも送信されません。リサイズはすべてブラウザのCanvas APIで行うので、ネットワークを切っても動作し、未公開のアイコンがお使いの端末の外に出ることはありません。登録不要・制限なし・透かしなしです。
Androidでは、画面密度ごとに別々のビットマップを用意します。ランチャーアイコンの基準は48dpで、これに密度区分ごとの倍率をかけたものが実際のピクセルサイズになります。
| フォルダ | 倍率 | ランチャーアイコン | アダプティブレイヤー |
|---|---|---|---|
mipmap-mdpi | 1.0× | 48px | 108px |
mipmap-hdpi | 1.5× | 72px | 162px |
mipmap-xhdpi | 2.0× | 96px | 216px |
mipmap-xxhdpi | 3.0× | 144px | 324px |
mipmap-xxxhdpi | 4.0× | 192px | 432px |
| Play Store掲載用 | — | 512px | — |
Android 8.0以降、アイコンの輪郭を決めるのはアプリではなくランチャーです。端末やランチャーによって、円、スクワークル、角丸の四角形、しずく形などになります。各レイヤーは108×108 dpですが、マスクの内側に入るのは中央の72×72 dpだけで、どの形のマスクでも確実に残るのは中央の66 dpの範囲に限られます。Googleの現在のガイドラインでは、ロゴそのものを48〜66 dpに収めるよう勧めています。四辺の外側18 dpずつはマスクで削られるかもしれない背景で、ランチャーのパララックス効果で動く部分でもあります。
よくある失敗は、108pxいっぱいにロゴを置いてしまうことです。手元のスマホでは問題なく見えても、別の端末で試したテスターから「端が欠けている」と返ってきます。このツールはアダプティブアイコンの前景を、セーフゾーンの比率66/108(約61%)に自動で縮小するので、自分で計算する必要はありません。
ZIPには、このファイルがmipmap-anydpi-v26/ic_launcher.xmlとして入っています。背景を単色にしたい場合は、colors.xmlで色を定義し、背景の参照先を@color/ic_launcher_backgroundに変えてください。
<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
<background android:drawable="@mipmap/ic_launcher_background" />
<foreground android:drawable="@mipmap/ic_launcher_foreground" />
</adaptive-icon>
Android 13ではテーマアイコンが加わりました。ユーザーがオンにすると、ランチャーが壁紙に合わせてアイコンに色をつけます。そのためには3つ目のレイヤーとしてmonochromeが必要です。アートワーク全体の色を変えたものではなく、ロゴを1色のシルエットにしたものです。写真や多色の元画像を自動で1色にまとめることはできないため、このツールでは作成しません。シルエットを自分で描いてdrawableとして追加し、次の1行を加えてください:
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
<background android:drawable="@mipmap/ic_launcher_background" />
<foreground android:drawable="@mipmap/ic_launcher_foreground" />
<monochrome android:drawable="@drawable/ic_launcher_monochrome" />
</adaptive-icon>
このレイヤーがなくても、テーマアイコンがオンのときに通常の色のまま表示されるだけです。表示が崩れることはありませんが、色が統一されたほかのアイコンの中で浮いて見えます。
多くの場合は不要です。Xcode 14以降、AppIconアセットにはSingle Sizeの枠があり、1024×1024の画像を1枚入れるだけで、残りはビルド時にXcodeが作ってくれます。この設定を使っているなら、ZIPから1024pxのファイルだけを取り出し、残りは無視してかまいません。
ただし、アセットカタログがAll Sizesに設定されている場合、古いXcodeや古いデプロイメントターゲットを使っている場合、React Native・Flutter・Capacitor・Unityといったクロスプラットフォームのツールチェーンが個別のPNGとContents.jsonをディスク上に必要とする場合は、全サイズのセットが今も欠かせません。このツールが書き出すのはまさにその形式なので、フォルダをそのままAssets.xcassetsに入れられます。
iOS 26では、レイヤー構造のLiquid Glassアイコンと、AppleのIcon Composerアプリが登場しました。Icon Composerでは、ライト・ダーク・ティントの各バリエーションを含む.iconファイルを作れます。ただし使うかどうかは任意で、平面的な1024pxのPNGでも引き続きリリースでき、システムが独自のハイライトとマスクを上から重ねてくれます。レイヤーを生かした見た目を作り込みたいならIcon Composerで行い、平面的なセットとAndroid・Web側の一式にはこのツールを使ってください。
App Storeのマーケティング用アイコンは、完全に不透明でなければなりません。アルファチャンネルがあるとアップロードの時点ではじかれるので、元画像に透明な部分がある場合は、上の「単色で塗りつぶす」をオンにして、ブランドカラーを選んでください。
掲載用アイコンは512×512の32ビットPNGで、1024 KB未満でなければなりません。同じくらい大事なのが、角丸やドロップシャドウを自分で付けないことです。Google Playが独自のマスクと影を付けるため、あらかじめ加工してあると二重に切り取られて不自然になります。角のオプションはオフのままにしてください。
ある程度は、アダプティブアイコンのセーフゾーンが役目を果たしている結果で、正常です。それでもほかのアプリと並べて小さく見えるなら、元のファイルの中でロゴを大きくしてから書き出し直してください。このツールの余白は足す方向にしか調整できず、マイナスにはできません。
1024pxのApp Store用アイコンにアルファチャンネルがあると、審査ではじかれるか、黒の上に合成されてしまいます。背景の塗りつぶしをオンにして、単色を設定してください。
細かく描き込んだアートワークは、32pxや48pxまで縮小すると細部を保てません。そのサイズでも見やすいアイコンは少数の大胆な形でできていて、細い線・グラデーション・小さな文字から真っ先につぶれていきます。そもそも元画像が1024pxより小さい場合は、生成する前に大きいサイズで書き出し直してください。