Apple Touchアイコンは、訪問者がサイトをiPhoneのホーム画面に追加した際に使う画像を明示します。ブラウザのタブ用ファビコンやWebアプリマニフェストのアイコンとは別のものです。
180×180の1サイズだけ
180×180ピクセルは高解像度の元画像としてよく使われます。iOSが小さな表示向けに縮小するため、多くのプロジェクトはひとつの指定で対応できます。
以前は57×57から152×152までの8ファイルを、それぞれsizes属性付きで指定する方法が推奨されていました。今は同じ表示結果のためにHTMLやリクエストを増やす必要はありません。
ファイルはPNGにしてください。この用途でiOSはSVGやWebPを読み込まず、JPEGでは平面的な図形の輪郭がにじみます。
不透明な背景を推奨
透明な背景は、バージョンや表示場面によって予期しない結果になることがあります。ホーム画面で確実に狙った見た目にするには、選んだ不透明な背景に図柄を配置してください。
書き出す前に、不透明な背景とアイコンを合成します。ブランドカラーや、カラフルなシンボルなら白を選び、図柄の周囲には約10%の余白を設けましょう。
角丸は自分で付けないでください。iOSが独自の角丸マスクを重ねます。あらかじめ丸くすると二重になり、角が不自然になります。
貼り付けるタグ
各ページのheadにlink rel="apple-touch-icon" href="/apple-touch-icon.png"を1行追加します。ファイルがひとつならsizes属性は省略できます。
必要ならmeta name="apple-mobile-web-app-title" content="Your brand"を追加して、アイコン下の名前を指定できます。指定がない場合はページタイトルが使われ、長すぎると省略されます。
ルートにもapple-touch-icon.pngという名前でファイルを置いてください。favicon.icoと同様、タグが見つからない場合はiOSがその場所を探します。
アイコンが更新されない理由
iOSはアイコンを強くキャッシュし、すでにホーム画面にあるショートカットは自動では変わりません。新しい版を試すには、ショートカットを削除してSafariのデータを消し、サイトをもう一度追加します。
表示されない場合は、ファイルが404ではなく200を返すか、Content-Typeがimage/pngか、robots.txtや認証でブロックされていないかを確認します。
LFFaviconのチェック機能は、公開URLでこれらを確認し、実際に取得したアイコンを表示します。
一次資料
よくある質問
apple-touch-iconは複数サイズ必要ですか？
多くのプロジェクトでは、高解像度の180×180ファイルが1枚あればiOSが縮小できます。サポート対象の実機で確認してください。
Androidもapple-touch-iconを使いますか？
Android版Chromeが代替として使う場合はありますが、優先するのはWebマニフェストのアイコンです。正式な設定として192×192と512×512をマニフェストに指定してください。
Apple TouchアイコンにSVGを使えますか？
いいえ。このタグにはラスター形式のPNGが必要です。SVGは鮮明さとダークモード対応を活かせるデスクトップのファビコンに使ってください。