アプリアイコン：ファビコンとの違い
アプリアイコンは、ホーム画面・ランチャー・Dock・アプリスイッチャー上でインストール済みアプリを表す画像で、ブラウザ内でサイトを表すファビコンとは対照的です。ウェブでは同じアートワークが両方を担い、iOS はアプリアイコンを apple-touch-icon の link タグから、Android とデスクトップ PWA は Web アプリマニフェストの icons 配列から取ります。各プラットフォームは自身の形に切り抜き・マスクするため、それに耐えられるようアートワークを描く必要があります。
同じアートワーク、違う役割
ファビコンはブラウザのクロームの中、16〜32 ピクセルで、意味の大半を担うページタイトルの隣に住んでいます。アプリアイコンはホーム画面上、100 ピクセル以上で、単独で、十数個のライバルの隣に住み、あなたを識別する唯一のものです。より広い場所と、より厳しい視線を受けます。
実際的な違いは、プラットフォームがどこから読むか、そしてその後に何をするかにあります。ブラウザはファビコンを与えられたまま描きます。OS はアプリアイコンを形に切り抜き、影を足し、時に色を付けたり暗くしたりするため、キャンバスの端まで伸びるマークは切れてしまいます。
各プラットフォームがアプリアイコンを読む場所
| プラットフォーム | 取得元 | 出荷するサイズ |
|---|---|---|
| iOS / iPadOS | link rel="apple-touch-icon" | 180x180 PNG、不透明 |
| Android | マニフェストの icons 配列 | 192x192 と 512x512 PNG |
| デスクトップ PWA | マニフェストの icons 配列 | 512x512 PNG |
| Android ランチャーの形状マスク | purpose maskable のマニフェストエントリ | 512x512 PNG、80% セーフゾーン |
| Windows のショートカット | favicon.ico | 48x48 エントリ |
重要な二つの宣言
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">iOS は前者を読み、Android とデスクトップ PWA は後者が参照するファイルの icons 配列を読みます。この二つで、インストール済みアプリのあらゆる表示面をカバーできます。
アプリアイコンに関するよくある質問
アプリアイコンとファビコンに別々のアートワークが必要ですか？
通常は別々のアートワークではなく、別々の処理が必要です。アプリアイコンは塗りつぶした背景とゆったりした余白を求め、ファビコンはマークをできるだけ大きく単純にすることを求めます。同じロゴ、二つの書き出しです。
なぜホーム画面のアイコンがスクリーンショットのように見えるのですか？
iOS は、apple-touch-icon の link もサイトのルートの /apple-touch-icon.png も見つからないと、ページのスクリーンショットにフォールバックします。どちらかを追加すれば直りますが、ショートカットを追加し直すまで古いアイコンが残ることがあります。
元のアートワークはどのサイズにすべきですか？
1024x1024 以上、正方形で、角丸を焼き込まないことです。どのプラットフォームのサイズもそこからきれいに縮小でき、プラットフォームが自身の角の形を適用します。