Xcode で iOS アプリアイコンを設定する方法

ここでは、Xcode で iOS アプリのアプリアイコン (App Icon) を設定する方法をご説明します。

今回は、AnimalPics という名前のアプリに、こんな感じのアプリアイコンを設定します。

iOS アプリアイコンの Apple のガイドライン

まず最初に、iOS アプリアイコンについて、Apple のガイドラインをポイントだけ簡単な言葉でまとめておきます。詳細は Apple のサイトでご確認ください。

ここで、デザインに関係なく注意しておきたいのは、画像の角をまるめないという点と、透過を使わないという点です。

特に透過は、シミュレーターやデバイスを Xcode につないでテストしている時は大丈夫ですが、App Store などで配布しようとした時に「ERROR ITMS-90717: Invalid App Store Icon」のエラーになります。

このエラーの解決方法は「ERROR ITMS-90717: Invalid App Store Icon の解決方法」をご覧ください。

まず、iOS のアプリアイコンの元となる画像をつくります。

必要となる iOS アプリアイコンの中で一番大きい画像のサイズが App Store 用の 1024px x 1024px です。

お好きな画像エディタで、1024px x 1024px のアプリアイコンをデザインしてください。

この時、アイコンの角はシステムが丸めてくれるので、四角のままで大丈夫です。

作成したアプリアイコンの画像を、透明の設定をオフにして、png フォーマットで保存してください。

透明の設定がわからない方は、png フォーマットで保存した後で、Mac のプレビューアプリから透明の設定（アルファ）をオフにできます。

プレビューアプリのメニューで [ファイル] > [書き出す] を選択し、エクスポートする画面が出てくるので、アルファのチェックボックをはずして、保存すれば OK です。

iOS アプリのアイコンは、デバイスごとに違ったサイズが必要になります。

iOS アプリのプロジェクトを Xcode で開いて、左側のナビゲーターエリアで Assets.xcassets を選択して、AppIcon を選択してください。

ターゲットのデバイスに応じて、ここに出てくるサイズのアプリアイコンが必要になります。

ひとつひとつ画像のサイズを変更して保存し、それをここの枠にドラッグ＆ドロップしていってもいいのですが、オンラインで iOS アプリアイコン用の画像を一括生成してくれるウエブサイトがたくさんあります。

「ios app icon generator」などのキーワードで検索してみてください。

今回は、App Icon Generator のサイトで、1024x1024 の画像をアップロードして、必要なデバイスを選択し Generate してダウンロードしました。

生成した iOS アプリアイコンを Xcode で設定します。

iOS アプリのプロジェクトを Xcode で開いて、左側のナビゲーターエリアで Assets.xcassets を選択して、AppIcon を選択してください。

サイズ別の画像を自分で作った場合は、ここの枠にそれぞれのアイコン画像をドラッグ＆ドロップしていってください。

App Icon Generator のサイトなどで一括生成した場合は、ダウンロードされたファイルを解凍すると次のような感じになっていると思います。

AppIcon を選択し、[Delete Selected Items] で AppIcon を削除します。

解凍したファイルの中の [AppIcon.appiconset] フォルダを選択し、Xcode の AppIcon があったところにフォルダごとドラッグ＆ドロップします。

そうすると、それぞれのサイズの iOS のアプリアイコンを自動的に設定してくれます。

もしうまくいかなかった場合は、ドラッグ＆ドロップした AppIcon を削除して、このエリアで右クリックして [iOS] > [iOS App Icon] で AppIcon の枠を元に戻せますので、ひとつずつ設定するなどしてください。

iOS アプリのアイコンの設定ができたので、アプリをインストールして確認してみましょう。

今回は iPhone 11 のシミュレーターを選択して、ボタンをクリックします。

アプリがインストールされ起動するので、ホーム画面を出します。

設定したアプリアイコンが表示されていますね。

以上、Xcode で iOS アプリのアプリアイコン (App Icon) を設定する方法をご説明しました。