K-magpie › カササギツール › アプリアイコン生成

한국어로 보기 · English version

アプリアイコン生成

正方形の画像1枚から、Androidの全mipmap密度、アダプティブアイコンのレイヤー、Play Store用の512pxアイコン、iOSのAppIconセット、Web用ファビコンを作り、フォルダ構成を整えた状態でZIPにまとめます。ファイルはブラウザの外に送信されません。アップロードも登録も不要です。

ここに画像をドロップ、またはクリックしてファイルを選択
PNG推奨 · 1024×1024の正方形画像だといちばんきれいに仕上がります

1024pxの正方形PNG1枚から、Android・iOS・ファビコンのアイコン一式を作成し、フォルダ構成を整えたZIPで受け取れます。アダプティブアイコンのレイヤーにはセーフゾーン分の余白が自動で入るので、丸いランチャーマスクで絵柄が欠けることもありません。アップロードは一切行わないため、未公開のアートワークがお使いの端末の外に出ることはありません。

カササギ診断のサムズアップするカササギロゴ カササギ診断で遊ぶ入力は生年月日だけで、30秒で結果が出ます。ゾンビ生存率、前世、アイドルポジション、守護神獣など、友達と比べて楽しめる診断です。 →

使い方

まず1024×1024の正方形PNGを用意します。元画像が大きいほど、どのサイズに縮小してもきれいに仕上がるので、ベクター系のツールから1024pxで直接書き出すといちばんシャープになります。必要なセットを選んでダウンロードを押すと、フォルダ分け済みのZIPが手に入ります。Androidのファイルはapp/src/main/res/に入れ、iOSではアセットカタログ内のAppIcon.appiconsetフォルダを丸ごと置き換えてください。

データはどこにも送信されません。リサイズはすべてブラウザのCanvas APIで行うので、ネットワークを切っても動作し、未公開のアイコンがお使いの端末の外に出ることはありません。登録不要・制限なし・透かしなしです。

Androidのアイコンサイズの仕組み

Androidでは、画面密度ごとに別々のビットマップを用意します。ランチャーアイコンの基準は48dpで、これに密度区分ごとの倍率をかけたものが実際のピクセルサイズになります。

フォルダ倍率ランチャーアイコンアダプティブレイヤー
mipmap-mdpi1.0×48px108px
mipmap-hdpi1.5×72px162px
mipmap-xhdpi2.0×96px216px
mipmap-xxhdpi3.0×144px324px
mipmap-xxxhdpi4.0×192px432px
Play Store掲載用—512px—

アダプティブアイコンのセーフゾーン

Android 8.0以降、アイコンの輪郭を決めるのはアプリではなくランチャーです。端末やランチャーによって、円、スクワークル、角丸の四角形、しずく形などになります。各レイヤーは108×108 dpですが、マスクの内側に入るのは中央の72×72 dpだけで、どの形のマスクでも確実に残るのは中央の66 dpの範囲に限られます。Googleの現在のガイドラインでは、ロゴそのものを48〜66 dpに収めるよう勧めています。四辺の外側18 dpずつはマスクで削られるかもしれない背景で、ランチャーのパララックス効果で動く部分でもあります。

よくある失敗は、108pxいっぱいにロゴを置いてしまうことです。手元のスマホでは問題なく見えても、別の端末で試したテスターから「端が欠けている」と返ってきます。このツールはアダプティブアイコンの前景を、セーフゾーンの比率66/108(約61%)に自動で縮小するので、自分で計算する必要はありません。

アダプティブアイコンのXML

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以降のテーマアイコン

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>

このレイヤーがなくても、テーマアイコンがオンのときに通常の色のまま表示されるだけです。表示が崩れることはありませんが、色が統一されたほかのアイコンの中で浮いて見えます。

iOS:今も13サイズすべてが必要?

多くの場合は不要です。Xcode 14以降、AppIconアセットにはSingle Sizeの枠があり、1024×1024の画像を1枚入れるだけで、残りはビルド時にXcodeが作ってくれます。この設定を使っているなら、ZIPから1024pxのファイルだけを取り出し、残りは無視してかまいません。

ただし、アセットカタログがAll Sizesに設定されている場合、古いXcodeや古いデプロイメントターゲットを使っている場合、React Native・Flutter・Capacitor・Unityといったクロスプラットフォームのツールチェーンが個別のPNGとContents.jsonをディスク上に必要とする場合は、全サイズのセットが今も欠かせません。このツールが書き出すのはまさにその形式なので、フォルダをそのままAssets.xcassetsに入れられます。

Liquid GlassとIcon Composer

iOS 26では、レイヤー構造のLiquid Glassアイコンと、AppleのIcon Composerアプリが登場しました。Icon Composerでは、ライト・ダーク・ティントの各バリエーションを含む.iconファイルを作れます。ただし使うかどうかは任意で、平面的な1024pxのPNGでも引き続きリリースでき、システムが独自のハイライトとマスクを上から重ねてくれます。レイヤーを生かした見た目を作り込みたいならIcon Composerで行い、平面的なセットとAndroid・Web側の一式にはこのツールを使ってください。

1024pxのアイコンに透明部分は使えない

App Storeのマーケティング用アイコンは、完全に不透明でなければなりません。アルファチャンネルがあるとアップロードの時点ではじかれるので、元画像に透明な部分がある場合は、上の「単色で塗りつぶす」をオンにして、ブランドカラーを選んでください。

うまくいかないとき

Play Storeでアイコンがはじかれた

掲載用アイコンは512×512の32ビットPNGで、1024 KB未満でなければなりません。同じくらい大事なのが、角丸やドロップシャドウを自分で付けないことです。Google Playが独自のマスクと影を付けるため、あらかじめ加工してあると二重に切り取られて不自然になります。角のオプションはオフのままにしてください。

アイコンがほかのアプリより小さく見える

ある程度は、アダプティブアイコンのセーフゾーンが役目を果たしている結果で、正常です。それでもほかのアプリと並べて小さく見えるなら、元のファイルの中でロゴを大きくしてから書き出し直してください。このツールの余白は足す方向にしか調整できず、マイナスにはできません。

iOSのアイコンが黒くなった

1024pxのApp Store用アイコンにアルファチャンネルがあると、審査ではじかれるか、黒の上に合成されてしまいます。背景の塗りつぶしをオンにして、単色を設定してください。

小さいサイズがぼやけて見える

細かく描き込んだアートワークは、32pxや48pxまで縮小すると細部を保てません。そのサイズでも見やすいアイコンは少数の大胆な形でできていて、細い線・グラデーション・小さな文字から真っ先につぶれていきます。そもそも元画像が1024pxより小さい場合は、生成する前に大きいサイズで書き出し直してください。

あわせて使えるツール

ストア用スクリーンショット生成端末フレームとキャプション、ストア規格サイズ 画像の形式変換PNG・JPG・WebP・BMP・ICO 画像リサイズpx指定・比率トリミング・一括処理

日本語版のツール15種をすべて見る →