Apple Touch Icon：サイズ・タグ・iOS の挙動
Apple Touch Icon は、Safari からサイトをホーム画面に追加したときに iOS が使う画像です。180x180 の PNG 一枚を /apple-touch-icon.png として配信し、rel="apple-touch-icon" を使った link タグで指し示します。iOS はその画像の透過を無視して黒地に合成するため、不透明な背景を与えましょう。角丸はあらかじめ焼き込まず、iOS に適用させてください。
iOS はそれをどう扱うか
ユーザーが Safari で「共有」から「ホーム画面に追加」をタップすると、iOS はランチャー用のアイコンを必要とします。まず rel="apple-touch-icon" の link タグを探し、無ければ /apple-touch-icon.png と /apple-touch-icon-precomposed.png をサイトのルートから直接リクエストします。何も見つからなければページのスクリーンショットにフォールバックしますが、これが意図どおりに見えることはありません。
用意する画像は正方形で、全面に描かれています。iOS は独自の角丸マスクを適用してアイコンを描画するため、あらかじめ角を丸めた元画像は二重に丸められ、縁に目立つアーティファクトが出てしまいます。
タグ
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">タグ一つ、ファイル一つで、モダンなセットアップは完了です。タグ無しのフォールバック経路も解決するよう、同じファイルを /apple-touch-icon.png でも配信してください。
用意するもの
| 項目 | 値 |
|---|---|
| 寸法 | 180x180 ピクセル |
| フォーマット | PNG、アルファは不要 |
| パス | /apple-touch-icon.png |
| 背景 | 不透明にする：透過は黒地に合成される |
| 角 | 元画像は正方形にする：iOS が自ら角をマスクする |
| 安全マージン | マスクで切れないよう、外周の数パーセントからマークを離しておく |
Apple Touch Icon に関するよくある質問
従来の 9 サイズの apple-touch-icon すべてが必要ですか？
いいえ。現行の iOS は 180x180 を使い、より小さい場面では縮小します。57・60・72・76・114・120・144・152 のバリアントは、ごく古い iPhone と iPad でのみ意味があります。
apple-touch-icon-precomposed とは何ですか？
従来のオプトアウトです。古い iOS はホーム画面アイコンに光沢のハイライトを加えており、precomposed バリアントはそれを加えないよう指示しました。iOS は何年も前に光沢をやめたので、通常の rel="apple-touch-icon" だけで十分です。
Android は apple-touch-icon を使いますか？
Android の Chrome は、サイトに Web アプリマニフェストのアイコンが無い場合にフォールバックとして使いますが、これは頼るべきものではありません。Android 向けにはマニフェストで 192x192 と 512x512 の PNG を宣言し、apple-touch-icon は iOS を担わせましょう。