apple-touch-icon: 完全ガイド
誰かがあなたのサイトをiPhoneのホーム画面に追加すると、iOSは1つのタグを参照します。それを間違えると、代わりにページのぼやけたスクリーンショットをつかんでしまいます。
apple-touch-iconとは何か
apple-touch-iconは、ユーザーがホーム画面に追加をタップしたときにiOSが使うアイコンです。faviconとは別物で、web app manifestとも別物です。iOSが、拡大した小さなタブのfaviconではなく、フル品質のアプリ風アイコンを求めるために存在します。
180x180のPNGが1つあれば十分です。現在のiOSはその1つのファイルを必要なあらゆるコンテキスト向けに縮小するので、57、72、114、152という古いサイズの階段を配信する必要はありません。
linkタグ
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- You can pin the size, but iOS defaults to the 180 file fine: -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">iOSはタグがなくてもサイトのルートにある/apple-touch-icon.pngを探しますが、宣言しておく方がさまざまな構成でより確実です。
仕様の一覧
| 項目 | 値 |
|---|---|
| 寸法 | 180x180 |
| フォーマット | PNG |
| 透過 | 無視され、黒の上に合成される |
| 角 | 四角のソース、iOSが角を丸めてくれる |
| ファイル名 | サイトのルートのapple-touch-icon.png |
よくある落とし穴
apple-touch-iconがまったくないのが最悪のケースです。iOSは見つけられないと、ページを縮小したスクリーンショットにフォールバックし、それはぼやけていてブランドから外れます。1つのタグで解決できます。
自分で角を丸めるのは間違いです。iOSは独自の角丸四角のマスクを適用するので、あらかじめ丸めたソースは二重に丸められ、アイコンの周りに背景の細い縁が現れます。四角でフルブリードの画像を渡しましょう。
更新は即時ではありません。誰かがあなたのサイトをホーム画面に追加した後は、サーバー上のアイコンを変えても既存のショートカットは更新されません。新しいアイコンを取り込むには、削除して再度追加してもらう必要があります。
よくある質問
apple-touch-iconのサイズはいくつですか?
180x180ピクセルのPNGです。現在のiOSはその1つのファイルをあらゆるコンテキスト向けに拡大縮小するので、古い57、72、114、152のサイズは不要です。
apple-touch-iconに黒い背景が表示されるのはなぜですか?
iOSはapple-touch-iconの透過を無視し、黒の上に合成します。透過ではなく不透明な背景色でPNGを書き出しましょう。
iOSが私のサイトにぼやけたアイコンを表示するのはなぜですか?
おそらくapple-touch-iconがありません。ないと、iOSはページを縮小したスクリーンショットを使います。180x180のPNGと正しいlinkタグを追加しましょう。
変更したのにホーム画面のアイコンが更新されなかったのはなぜですか?
既存のホーム画面のショートカットは、作成時のアイコンをキャッシュします。新しいapple-touch-iconを取り込むには、ユーザーがショートカットを削除してサイトを再度追加する必要があります。