サーバーのログをチェックしていて、apple-touch-icon-152x152.pngのような特定のファイルに対する404エラーの山に気づいたことはありませんか？おそらくあなたは慌ててデザインツールを開き、Appleの終わりのないデバイスラインナップを満たすために、ロゴのバリエーションを何十個も書き出したことでしょう。
その作業、今すぐやめましょう。
公式ドキュメントは歴史的に、すべての画面解像度に対して独自の画像を作成するよう開発者に求めてきました。その結果、iPad Mini用、iPhone Pro用など、リンクで埋め尽くされた肥大化した<head>タグが出来上がりました。このapple touch icon sizes guideでは、そのアプローチが2026年においていかに時代遅れであるかを解説します。
Apple Touch Icon サイズの決定版ガイド
ユーザーがiPhoneで「ホーム画面に追加」をタップすると、Safariはサイトを表現するための特定のPNGファイルを探します。ファイルが提供されていない場合、iOSは不格好で読みにくいウェブページのスクリーンショットを生成してしまいます。
何年もの間、ファイルの膨大なリストを生成するのが標準的なアドバイスでした。古いiPhone用の120x120、iPad用の152x152、iPad Pro用の167x167、最新のiPhone用の180x180などです。これはリポジトリを散らかすメンテナンスの悪夢でした。
現代の「ワンサイズ」戦略
現代のiOS開発の現実はこうです。Appleのレンダリングエンジンは、画像のダウンスケールにおいて信じられないほど優秀です。もはや、すべての解像度を提供する必用はありません。
高解像度の画像を提供すれば、iOSが自動的に計算を行い、ユーザーの特定のデバイスにぴったり合うように縮小してくれます。今日、実際に生成する必要がある唯一のサイズは180x180ピクセルです。
このサイズは、最大のiPhone Pro Maxモデルで要求される@3x解像度に対応しています。古いiPadが152x152のアイコンを要求した場合、単に180x180のファイルを取得して縮小するだけです。視覚的な違いは、人間の目には文字通り知覚できません。
実際の証明：GitHubのアプローチ
私の言葉を鵜呑みにしないでください。GitHub、Stripe、Vercelなどの大手テクノロジー企業のソースコードを検証してみてください。レガシーなAppleアイコンの巨大なブロックは見つからないはずです。彼らはiOSデバイスに対して、正確に1つのファイルだけを提供しています。
使用すべき正確なHTMLは以下の通りです：
<!-- 2026年に必要な唯一のApple Touch Icon -->
<link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'>この1行が、かつての6行のコードを置き換えます。帯域幅を節約し、HTMLをクリーンにし、市場に出回っているすべてのiOSデバイスを満足させます。正確なHTMLの配置についてさらに深く知りたい場合は、Apple Touch Iconの完全セットアップガイドをご覧ください。
レガシーサイズ vs 2026年の標準
なぜ古いサイズを捨てることができるのかを理解するために、Appleのハードウェアがどのように進化してきたかを見てみましょう。以下は、レガシーな要件と今日実際に出荷すべきものの比較です。
| ターゲットデバイス | レガシーサイズ | 2026年の対応 |
|---|---|---|
| 古いiPhone (@2x) | 120x120 | 無視 (iOSが180pxを縮小) |
| 古いiPad (@2x) | 152x152 | 無視 (iOSが180pxを縮小) |
| iPad Pro (@2x) | 167x167 | 無視 (iOSが180pxを縮小) |
| 最新のiPhone Pro (@3x) | 180x180 | 必須 |
180x180アイコンのデザインルール
サイズを正しく設定するのは、戦いの半分に過ぎません。iOSはこれらのアイコンを標準のブラウザのFaviconとは異なる方法で扱います。標準のロゴを単にリサイズしただけでは、iPhoneのホーム画面で壊れて見える可能性が高いです。
- 透明度はゼロに： iOSはホーム画面アイコンの透明な背景をサポートしていません。透明なPNGをアップロードすると、Appleは空白部分を強制的に真っ黒に塗りつぶします。必ず単色の背景色を使用してください。
- 角を丸めない： 画像の角を事前に丸めないでください。完全な正方形をアップロードします。iOSは自動的に、特徴的な「スクワークル（squircle）」マスクをデザインに適用します。事前に丸めてしまうと、奇妙な二重の丸角になってしまいます。
- セーフゾーンを守る： Appleがマスクを適用するため、端に近すぎるロゴは切り取られてしまいます。主要なグラフィックを中央に配置し、四方に約20〜30ピクセルの余白を残してください。
Androidのサイズはどうする？
開発者がよく犯す間違いは、Apple Touch IconをAndroidデバイスに流用しようとすることです。古いバージョンのAndroidはAppleアイコンにフォールバックしていたかもしれませんが、現代のAndroidは完全にWeb App Manifestに依存しています。
Androidには192x192と512x512のアイコンが必要です。180x180のAppleアイコンに二役をこなさせようとしないでください。これらは分けて管理します。Androidの要件については、PWAアイコン要件ガイドで詳しく読むことができます。
アイコンを複雑にするのはやめよう
私たちは、ピクセルパーフェクトなレガシー解像度を追い求めることに時間を無駄にしすぎています。ウェブは進化し、ブラウザは10年前よりも賢くなっています。
単一の高品質な180x180 PNGを生成しましょう。単色の背景を持ち、ロゴが中央に配置されていることを確認し、<head>にリンクします。正確な余白を得るためにPhotoshopやFigmaをいじりたくない場合は、ロゴをMzu favicondlにドロップするだけです。セーフゾーンを自動的に処理し、透明度を削除し、標準のウェブFaviconとともにiOSが期待する正確な180x180ファイルを出力します。