Apple Touch Icon 180x180 — iOSホーム画面用Favicon
iPhoneとiPadのホーム画面用180x180 Apple Touch Iconの設定方法。角丸、ビジュアルエフェクト、apple-touch-iconリンクタグについて解説します。
Platform-Specific
詳細な説明
Apple Touch Icon 180x180
Apple Touch Iconは、iPhoneやiPadのユーザーがWebサイトをホーム画面に追加した際に表示されるアイコンです。180x180ピクセルで、ネイティブアプリのアイコンの中で視覚的に魅力的で即座に認識できる必要があります。
Appleによるアイコンの処理
Appleは自動的にいくつかの視覚的処理を適用します：
- 角丸 — 正方形のアイコンにiOSアイコン形状に合わせた角丸マスクが適用される
- 透明度なし — 透明な領域はコンテキストに応じて黒または白で塗りつぶされる
- 視覚効果なし — iOS 7以降、Appleはグロスやシャドウ効果を適用しなくなった
実装
HTMLの<head>に以下のタグを追加します：
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
ファイル要件
- 形式: PNG（JPEGはサポートされるが透明度制御の欠如のため非推奨）
- サイズ: 正確に180x180ピクセル
- 色空間: sRGB
- 角丸なし: 正方形の画像を提供 — iOSが自動的にマスクを適用
- 透明度非推奨: 背景をソリッドカラーで塗りつぶすこと
デザインの考慮事項
アイコンはホーム画面で比較的大きなサイズで表示されるため：
- ロゴやシンボルはアイコン領域の約60-70%を占めるべき
- 端の周囲にパディングを残す（Appleは約10%のマージンを推奨）
- 背景にブランドカラーを使用
- 明暗両方のiOS壁紙に対してテスト
- 角が丸められることを忘れずに — 重要なコンテンツを角から離す
ユースケース
モバイルトラフィックのあるすべてのWebサイトにApple Touch Iconを含めるべきです。これは、iOSユーザーをターゲットにしたWebアプリやプログレッシブWebアプリ、ユーザーがホーム画面での素早いアクセスを望むECサイト、iOSホーム画面での外観が重要なブランド志向のWebサイトにとって特に重要です。