アプリアイコンのサイズと安全領域：2つのアイコンから74ファイルを作った結果
アプリアイコンは1024pxの1枚をきれいに描けば終わりと思いがちですが、実際には設定画面の29px、通知の20pxのようなとても小さなサイズでも使われ、Androidでは端末ごとに円形・角丸四角形など別の形に切り抜かれます。本記事では性格の異なる2つの原本を当サイトのアプリアイコン生成ツールに入れて74ファイルを作り、サイズごとの見え方とAndroidアダプティブアイコンで起きる問題を確かめました。
先に結論
- 小さなサイズで判別できたのはシンプルなアイコンだけでした。小さな文字や絵が多いアイコンは58pxからつぶれ、29pxでは何か分からなくなりました。
- アイコンにアプリ名などの文字を入れないでください。120pxでも読めませんでした。
- Androidアダプティブアイコンは、背景まで描いた絵をそのまま入れると形の内側に四角い縁が出ます。シンボルだけを透過で分け、背景は別に指定しましょう。
- iOSアイコンは角を自分で丸めず正方形で入れます。角はシステムが削ります。
どのサイズがどこで使われるか
| プラットフォーム | 主なサイズ（px） | 使われる場所 |
|---|---|---|
| iOS | 1024 / 180·120 / 87·58·29 / 60·40·20 | App Store / ホーム画面 / 設定 / 通知・Spotlight |
| macOS | 16〜1024（1x・2x） | Dock、Finder、リスト表示 |
| watchOS | 48〜234 | 通知、ランチャー、Quick Look |
| Android従来アイコン | 36·48·72·96·144·192 | ldpi〜xxxhdpiランチャー（mipmap） |
| Androidアダプティブ前景 | 108·162·216·324·432 | 108dpキャンバス、端末の形に合わせて切り抜き |
| Google Play | 512 | ストア掲載情報 |
この表は本ツールが作るプリセットです。実際に必要なスロットはプロジェクトの最小対応バージョンや対象端末で変わるため、XcodeやAndroid Studioで不足の警告を確認してください。
テスト方法
GPT画像モデルで1024×1024の原本を2つ作りました。①オレンジのグラデーションに白い紙飛行機が1つだけのシンプル型、②財布・棒グラフ・コイン・カレンダーと細い文字「Daily Budget Planner」が入った複雑型です。2つの原本をアプリアイコン生成ツールに入れ、実際の生成機能でファイルを作りました。環境は2026年9月、WindowsのChromium 152です。
| 原本 | 生成ファイル数 | 合計容量 | ZIP容量 | 120pxファイル | 29pxファイル |
|---|---|---|---|---|---|
| シンプル型 | 74 | 5.71 MiB | 5.73 MiB | 17.9 KiB | 1.5 KiB |
| 複雑型 | 74 | 6.96 MiB | 6.97 MiB | 25.3 KiB | 2.0 KiB |
生成はPCでどちらも1秒以内に終わりました。PNGはすでに圧縮された形式なので、ZIPにしても容量はほとんど減りません。容量の大半は1024pxの原本とmacOSの大きなサイズが占めます。
結果1 — 小さなサイズで生き残るアイコン
シンプル型は20pxでも紙飛行機の形が見えました。複雑型は120pxでも下の文字が読めず、58pxでは財布とカレンダーがひとかたまりに見え、29pxの拡大版では青と緑のしみだけが残りました。29pxの設定アイコンは縦横29マスのモザイクと同じで、細い線や小さな文字は1〜2画素に混ざって消えてしまいます。
アイコンを作るときは、1024pxの原本をスマートフォンの画面で爪ほどの大きさに縮めて見るのが一番早い確認方法です。シンボルは1つ、線は太く、背景とはっきりした明暗差を目安にしましょう。細部はストアのスクリーンショットで見せれば十分です。
結果2 — Androidアダプティブアイコンの四角い縁
Android 8.0以降のアダプティブアイコンは108×108dpの前景と背景の2レイヤーでできており、端末はそのうち中央の72dpだけを円や角丸四角形などに切り抜いて表示します。ロゴが切れないようにするには、中央の直径66dpの中に収める必要があります。本ツールは原本を108dpのうち中央66dp、つまり約61.1%（432pxのファイルで264px）の大きさで配置します。
問題は原本に背景色まで塗られている場合です。上の図のように四角い原本全体が前景になり、スクワークルや角丸四角形では内側に四角い縁が現れます。下の図のようにシンボルだけを透過PNGにしてツールに入れ、プロジェクトのadaptive-icon XMLで背景レイヤーを単色や別画像に指定すれば、どの形でもきれいに見えます。
なお「66%」で計算してはいけません。66dpは108dpの約61.1%なので、中央66%に合わせると安全領域より大きくなります。
Appleアイコンで確認すること
iOS・watchOSのアプリアイコンは透明部分が許されないため、本ツールは透明部分を選んだ背景色（初期値は白）で塗ります。透過ロゴを入れた場合は背景色をブランドカラーに変えてみましょう。角をあらかじめ丸めた原本を入れるとシステムがもう一度削り、角に背景色が見えてしまいます。正方形の原本をそのまま入れてください。
ZIPのXcode/AppIcon.appiconsetフォルダーにはPNGとContents.jsonが入っており、プロジェクトのAssetsに入れるとスロットが埋まります。ただし複数ターゲットやWatch拡張、Appleの新しいレイヤー方式のアイコン（Icon Composer）までは自動設定されないため、ビルド後に警告を確認してください。
作業の手順
- 1024×1024以上の正方形の原本を用意します。長方形は中央基準で切り抜かれます。
- Androidアダプティブアイコン用に、シンボルだけの透過PNGを別に用意します。
- ツールのプレビューで29px・40pxでも判別できるか確認します。
- ZIPをダウンロードし、XcodeにはAppIcon.appiconsetを、Android Studioにはmipmapフォルダーとアダプティブ前景を入れます。
- 実機やエミュレーターでホーム画面・設定・通知での見え方を確認します。
よくある失敗
- 小さな原本を拡大して使う：512pxの原本から1024pxを作るとぼやけます。ツールが警告を表示します。
- アイコンにアプリ名を書く：アプリ名はアイコンの下にすでに表示されます。
- 端までロゴを広げる：アダプティブアイコンでロゴの端が切れます。
- 白背景のアイコンを白背景でだけ確認する：ダークモードや色付きの壁紙での境界も確認しましょう。
本ツールの動作と限界
すべての処理はブラウザで行われ、原本はサーバーに送られません。生成されるのは静的PNGと従来方式のAppIcon.appiconsetです。Androidのモノクロテーマアイコン、通知用の白いアイコン、Appleのダーク・ティント版は作らないため、必要なら開発ツールで追加してください。PNGの一式を作ることと、ストア提出の検証を通過することは別の段階です。