誰かがあなたのウェブサイトをiPhoneやiPadのホーム画面に追加すると、iOSはアプリのようなアイコンとしてApple Touch Iconを使用します。これがないと、iOSは代わりにページの醜いスクリーンショットを撮ってしまいます。知っておくべきことをすべてご紹介します。
Apple Touch Iconとは？
Apple Touch Iconは、ユーザーがあなたのサイトをホーム画面にブックマークしたときにiOSデバイスが使用する特別なPNG画像です。ネイティブアプリのアイコンのように機能し、iOSは自動的に特徴的な角丸と光沢効果（古いiOSバージョンで）を適用します。
HTMLでは次のように宣言します。
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">必須サイズ：180×180ピクセル
2026年現在、必要なサイズは180×180ピクセルの1種類だけです。その理由は次のとおりです。
- iPhone (Retina) — 120×120または180×180を使用します（必要に応じてiOSが180を120に縮小します）
- iPad Pro — 167×167を使用します（iOSが180を縮小します）
- iPad — 152×152を使用します（iOSが180を縮小します）
iOSは縮小はうまくできますが、拡大はうまくできないため、最大のサイズ（180×180）を提供するのが最も安全なアプローチです。1つのファイルですべてのデバイスに対応できます。
補足：以前は、各デバイス（57, 60, 72, 76, 114, 120, 144, 152, 167, 180）ごとに異なるサイズが必要でした。現代のiOSはスケーリングを十分にうまく処理するため、180×180だけで完全に機能します。
ファイル形式の要件
- フォーマット: PNGのみ（JPEGも機能しますが、PNGが標準です）
- 形状: 正方形（iOSが自動的に角丸を適用します）
- 透明度: 避けてください — iOSは透明な領域を黒で置き換えます
- ファイル名: 慣例では
apple-touch-icon.pngです（iOSもこの名前を自動的に探します）
HTMLの実装
基本（1行）
<link rel="apple-touch-icon" href="/apple-touch-icon.png">明示的なサイズ指定
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">自動検出（HTML不要）
apple-touch-icon.pngという名前のファイルをウェブサイトのルートディレクトリに配置すると、HTML宣言がなくてもiOSは自動的にそれを見つけます。ただし、信頼性を高めるためには、HTMLで明示的に宣言することをお勧めします。
apple-touch-icon vs apple-touch-icon-precomposed
| 属性 | apple-touch-icon | apple-touch-icon-precomposed |
|---|---|---|
| 光沢効果 | iOSが光沢を追加します (iOS 6以前) | 光沢は追加されません |
| モダンiOS (7+) | 光沢なし (同じ挙動) | 光沢なし (同じ挙動) |
| 推奨 | こちらを使用してください | 非推奨、不要です |
iOS 7以降では光沢効果が追加されなくなったため、apple-touch-iconとapple-touch-icon-precomposedは同じように動作します。apple-touch-iconを使用するだけで十分です。
デザインのヒント
- 角丸を追加しないでください — iOSが自動的に適用します。自分で角丸にすると、二重に角丸になってしまいます。
- 透明度を避けてください — 単色の背景色を使用してください。透明な領域はiOSで黒になります。
- シンプルに保ってください — アイコンは画面上で約60pxで表示されます。細かいディテールは表示されません。
- ブランドカラーを背景に使用してください — これにより、アイコンがあらゆる壁紙で目立つようになります。
- 実機でテストしてください — iOSシミュレーターは常に実機と一致するとは限りません。
よくある間違い
- 透明度の使用 → iOSホーム画面で黒い背景になります
- 手動での角丸追加 → 二重の角丸効果
- 間違ったファイル形式 → SVGはサポートされていません。PNGを使用してください
- 小さすぎる → 57×57を提供すると、現代のRetina画面ではぼやけて見えます
- テストを忘れる → 常に実際のiPhoneでホーム画面に追加してテストしてください
他のサイトの例を見る
他の主要なウェブサイトがApple Touch Iconをどのように扱っているか気になりますか？Mzu favicondlを使用して、Apple Touch Iconを含むあらゆるウェブサイトのfavicon設定を確認できます。