元の画像はどんなものがいい?

小さいサイズでも見分けがつく、シンプルなマークから始めましょう。透過のSVGか大きな透過PNGなら、ジェネレーターがアートワークを単色の背景から切り離せます。写真からでも使えるフラットなアイコンは作れますが、写真の不透明な四角形がそのままモノクロのシルエットにもなってしまいます。出力サイズを大きくしても、アップロードした画像にない細部は出てきません。

アプリアイコン作成ツールを開き、SVG、PNG、JPEG、WebP、HEICのいずれかをアップロードして、Android、iOS、または両方を選びます。ic_launcherのようなリソース名、背景色、各辺の余白を設定します。ZIPには選んだプラットフォームのファイルと取り込みのメモだけが入ります。ダウンロードは非公開で、ロックを解除済みの結果に使う場合は追加料金はかかりません。自分でアップロードしたファイルの現在の料金は、ツールのページに表示されています。

SVGのフクロウのロゴと、そこから作ったiOSアプリアイコン、円形のAndroidアダプティブアイコン、拡大した32pxのfavicon

作例のロゴの1つ(左)と、エクスポートツールで作ったもの:iOSアイコン、丸いランチャーで表示したAndroidアダプティブアイコン、拡大したfavicon。

Androidのパッケージに入っているもの

パッケージには、48、72、96、144、192ピクセルの従来のmipmap PNG、512ピクセルのPlayストア用画像、アダプティブアイコンのXMLが入っています。フォアグラウンドのアートワークは、xxxhdpiで108dpに相当する432ピクセルの透明なキャンバスに配置されます。マークは、指定した余白が加わる前の段階で、中央の66dpのセーフエリアに収まります。これでランチャーのマスクに余裕ができ、大事なアートワークがキャンバスの端にかかりません。

アダプティブアイコンのリソースはAPI 26のディレクトリに入ります。API 33用のバリエーションにはモノクロレイヤーが追加されます。フォアグラウンドとモノクロのPNGはdrawable-xxxhdpiに、従来のリソースはそれぞれの画面密度のmipmapフォルダーに入ります。android/resをアプリの既存のリソースディレクトリにマージし、applicationにandroid:icon="@mipmap/ic_launcher"を設定します(名前は自分で選んだものに置き換えてください)。

テーマアイコンは、元画像のアルファチャンネルから作られます。透明な背景の三角形なら三角形のシルエットに、完全に不透明な写真なら塗りつぶされた四角形になります。これは入力画像の性質によるもので、被写体を認識する機能ではありません。形のあるテーマアイコンが必要なときは、背景を削除するか、専用に作った透過のマークを用意してください。

iOSのパッケージに入っているもの

iOSのフォルダーには、1,024×1,024ピクセルの不透明なRGB画像とContents.jsonファイルが入ったAppIcon.appiconsetがあります。このセットを既存のXcodeのアセットカタログに追加し、ターゲットの設定でAppIconを選びます。Xcodeのシングルサイズ方式では、この1枚から各プラットフォームのサイズが作られます。

このエクスポーターが作るのは、フラットなアセットカタログです。Icon Composerの.iconドキュメント、編集できる奥行きのレイヤー、Liquid Glassの効果は作りません。それらには別のデザイン作業が必要です。あとでレイヤー付きのバリエーションを作るつもりなら、元のアートワークを残しておきましょう。アプリの画面内で使う通常の画像には、アプリアイコンのセットではなくXcodeのimagesetを選んでください。

公開前に確認すること

Androidでは、円形、スクワークル(角丸の正方形)など、さまざまなランチャーのマスクで確認しましょう。テーマアイコンを有効にしてモノクロの結果を確認し、余白を加えたあとでフォアグラウンドが小さくなりすぎていないかも確かめてください。iOSでは、Xcodeと実機でアイコンを確認します。小さいサイズでのマークの見え方、背景とのコントラスト、不要な輪郭が出ていないかをチェックしてください。

生成されたパッケージが用意するのはリソースファイルです。商標の権利を判断したり、見た目の品質を評価したり、ストアの審査通過を約束したりするものではありません。フォルダーをマージする前に既存のリソースのコピーを取っておき、アプリのビルド出力で名前の衝突やターゲット固有の要件がないか確認してください。