apple-touch-icon は、ユーザーがあなたのウェブサイトをiPhoneやiPadの ホーム画面に追加したときにiOSが使用する画像です。MacではSafariのピン留めタブの アイコンとしても表示されます。これがないと、iOSは汎用的なスクリーンショットの サムネイルを表示してしまい、ブランディングの機会を逃すことになります。 このガイドでは、正確なサイズ、正しいタグ、監査失敗の修正方法を解説します。
端的な答え
- サイズ： 180×180ピクセル、PNG
- ファイル名：
apple-touch-icon.png - タグ：
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
apple-touch-iconのlinkタグ
すべてのページの <head> 内にこれを追加します。
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">古いデバイス向けに複数のサイズを宣言することもできますが、180×180だけで すべてのモダンなiPhone・iPadをカバーできます（iOSが自動で縮小します）。
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180.png">
<link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152.png">180×180のPNGが今すぐ必要ですか？Favicon.one にロゴをアップロードしてください。 出力パッケージには正しいサイズの
apple-touch-icon.pngが含まれます。
Apple touch iconのデザインガイドライン
- 正方形全体を埋める。 iOSが角を丸めるので、事前に丸めたりパディングを加えたりしないでください。
- 透過はNG。 塗りつぶしの背景色を使います。透過部分はiOS上で黒く描画されます。
- シンプルに保つ。 180px以下では細部が失われます。太い形状と高いコントラストが勝ちます。
- 実機でテスト。 サイトをホーム画面に追加して、実際の見た目を確認しましょう。
Lighthouseがapple-touch-iconを指摘する理由
Google LighthouseのPWA監査は有効なapple-touch-iconをチェックします。 よくある失敗原因は次のとおりです。
- タグ自体がない —
<link rel="apple-touch-icon">タグを追加してください。 - ファイルが404 —
/apple-touch-icon.pngが実際に存在して読み込めるか確認してください。 - サイズが誤り — 最低144×144が必要で、180×180が推奨です。
- 正方形でない画像 — アイコンは幅と高さが等しくなければなりません。
検証には Favicon Checker にサイトを通してください。
apple-touch-iconとファビコンの違いは？
| favicon.ico / PNG | apple-touch-icon.png | |
|---|---|---|
| 使用場所 | ブラウザタブ、ブックマーク | iOSホーム画面、Safariピン留めタブ |
| サイズ | 16, 32, 48 | 180×180 |
| 透過 | 対応 | 避ける（黒く描画される） |
| 角丸 | そのまま | iOSが自動で丸める |
完全なセットアップには両方が必要です。完全なサイズガイドをご覧ください。
「Precomposed」アイコン（レガシー）
古いiOSバージョンでは、iOSがグロス効果を付けるのを防ぐためにrel="apple-touch-icon-precomposed" がサポートされていました。 モダンなiOSではグロス効果が完全に無視されるため、今日では通常のapple-touch-icon だけで十分です。