iOSアプリアイコン、Google Playの掲載画像、Androidのアダプティブランチャーアイコン用レイヤー、Webファビコンは用途が異なります。書き出す前に使い道を決めましょう。Iconiseで使えるのはPNG、SVGへのベクター化、ファビコンZIPです。すべてのプラットフォームに提出できる一式ではありません。
4つの用途を分ける
| 用途 | 公式情報にある要件 | 準備するもの |
|---|---|---|
| iOS/iPadOS/macOSアプリアイコン | Apple：1024 × 1024 pxの正方形レイアウト。HIGはレイヤー設計とシステムによる形状マスクを説明しています。 | 元になる画像と、外観やXcodeプロジェクトに必要なアセット。書き出しサービスが受理を保証するものではありません。 |
| Google Play掲載用アイコン | 512 × 512 px、32-bit PNG、sRGB、最大1024 KB。Google Playがマスクと影を適用します。 | 角丸や外側の影を追加していない正方形の画像。 |
| Androidアダプティブランチャーアイコン | 108 × 108 dpのカラー2レイヤー。ロゴは48〜66 dp。テーマ対応にはモノクロレイヤーを追加できます。 | 前景と背景のリソース。必要ならAndroidプロジェクトにモノクロ用リソースも用意します。 |
| Webファビコン | 利用可能なサイズを含め、`link rel="icon"`でリソースを宣言します。ブラウザーが適切なものを選びます。 | サイトのファイルと`link`要素。プロジェクトによってはWebマニフェストも必要です。 |
Iconiseで準備できるもの
Iconiseの最終画面では画像をPNGでダウンロードし、ベクター化したSVGをリクエストし、WebファビコンのZIPを作成できます。パッケージには`favicon.ico`（16、32、48 px）、16と32 pxのPNG、180 pxの`apple-touch-icon.png`、192と512 pxのAndroid Chromeアイコン、`site.webmanifest`が含まれます。
元データを準備して書き出しを確認する
- プラットフォーム、配置場所（ランチャー、ストア掲載、Webサイト）、想定する外観を記録します。
- 公式ドキュメントで寸法、マスク、構成を確認します。
- 元画像を保管し、用途ごとに必要なレイヤーやファイルを用意します。
- 組み込み後にファイル名、形式、寸法、透明度、圧縮、表示を確認します。
- 実際のプロジェクトと公開手順でテストします。書き出しただけではストアの受理は分かりません。
Webファビコンの場合
ブラウザーは`rel="icon"`の複数リンクから、宣言された形式とサイズをもとに選択できます。IconiseのZIPにはリソースとマニフェストが含まれますが、サイトへの追加とパス、表示の確認は必要です。Webクリップ用のApple Touch IconはiOSアプリのアイコン要件とは別です。
よくある間違い
- ファビコンPNGにAndroid向けのアダプティブレイヤーがあると考える。
- Google Play掲載画像と端末のランチャーアイコンを混同する。
- プラットフォームが付ける角丸や影を画像に追加する。
- SVGへのベクター化を、手作業で作成・確認したベクター元データと扱う。
- 形式やサイズが1つ合えばストアに必ず受理されると思い込む。
用途を整理したら、比較ガイドに戻り、それぞれの表示環境で読みやすさを確認してください。