Apple Touch Icon完全ガイド｜iPhone・Safariでのファビコン設定と表示の仕組み

Apple Touch Iconとは？ iPhoneやSafariでのファビコン表示の仕組み

「ファビコンを設定したのに、iPhoneのホーム画面やSafariのお気に入りにアイコンが表示されない」——これはApple Touch Iconが設定されていないことが原因です。iPhoneやSafariでは、通常のファビコンとは別にApple Touch Iconという専用のアイコン設定が必要です。

Apple Touch Icon（アップルタッチアイコン）は、iPhoneやiPadでWebサイトをホーム画面に追加したときに表示されるアイコンです。HTMLでは<link rel="apple-touch-icon">で指定します。

通常のファビコン（<link rel="icon">）がブラウザのタブやブックマークに表示される16〜48px程度のアイコンであるのに対し、Apple Touch Iconは180x180pxのPNG画像で、iOSデバイスのホーム画面にネイティブアプリと並んで表示されます。

項目	favicon（通常）	Apple Touch Icon
主な用途	ブラウザタブ、ブックマーク	iOSホーム画面、Safariお気に入り
形式	ICO / PNG / SVG	PNG（必須）
標準サイズ	16x16〜48x48	180x180
角丸処理	なし	iOSが自動適用
HTMLの指定	`rel="icon"`	`rel="apple-touch-icon"`

つまり、ファビコンとApple Touch Iconは別々に用意する必要があるということです。ファビコンだけ設定してApple Touch Iconを設定していないサイトは少なくありませんが、その場合iOSユーザーがホーム画面にサイトを追加すると、ページのスクリーンショットが縮小された見栄えの悪いアイコンが表示されてしまいます。

Apple Touch Iconが表示される場所

Apple Touch Iconは、iOS上の以下の場面で使われています。

ホーム画面（Webクリップ）

もっとも代表的な用途です。Safariで「ホーム画面に追加」を実行すると、Apple Touch Iconがネイティブアプリのアイコンと同じように表示されます。アイコンの下にはページタイトルが表示されますが、<meta name="apple-mobile-web-app-title" content="任意の名前">を設定すれば、タイトルとは別の短い名前を指定できます。

Safariのお気に入り・スタートページ

Safariの新規タブやお気に入り一覧でも、Apple Touch Iconが設定されていればそのアイコンが使用されます。設定がないサイトはドメイン名の頭文字がグレーの背景に表示されるだけなので、視認性に大きな差が出ます。

Safariのタブバー

iOS 15以降のSafariでは、タブバーにもファビコン/タッチアイコンが表示されます。複数タブを開いているときのサイト識別に使われるため、設定しておくとユーザビリティが向上します。

macOS Safariのピン留めタブ・お気に入り

macOSのSafariでも、お気に入りバーやスタートページにApple Touch Iconが利用されます。Mac・iPhone・iPad間でSafariを使い分けるユーザーにとって、統一されたアイコンはブランド認知に効果的です。

Apple Touch Iconの推奨サイズ

結論：180x180pxの1枚でOK

現在のiOSでは、180x180pxのPNG画像を1枚用意するだけで、iPhone・iPad問わずすべてのデバイスに対応できます。iOSが必要に応じて自動的にリサイズしてくれるためです。

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

この1行をHTMLの<head>に追加し、180x180pxのapple-touch-icon.pngをルートディレクトリに配置するのが、もっともシンプルかつ確実な方法です。

旧デバイス用サイズ一覧（参考）

複数サイズを個別に指定する方法もあります。ただし、2026年現在ではほぼ必要ありません。180x180を1枚用意すれば、iOSが自動で縮小して適用してくれます。

サイズ	対象デバイス	備考
180x180	iPhone Retina（6s以降すべて）	必須・これだけでOK
167x167	iPad Pro（12.9インチ、10.5インチ）	180から自動縮小
152x152	iPad Retina（第3世代〜）	180から自動縮小
120x120	iPhone（5s〜6）	旧モデル、ほぼ現役外
76x76	iPad（非Retina）	旧モデル、ほぼ現役外

かつてはsizes属性で複数サイズを列挙する書き方が推奨されていましたが、Appleの公式ドキュメントでも現在は180x180の単一指定が案内されています。コードの保守性を考えても、1枚に絞るのがベストプラクティスです。

各プラットフォームで必要な全サイズを確認したい場合は、以下の記事も参考にしてください。

HTMLの設定方法

基本の書き方

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<head>タグ内のどこに書いても問題ありませんが、他のファビコン指定と並べておくのが一般的です。

ファビコンと一緒に設定する場合（推奨テンプレート）

Apple Touch Iconだけでなく、標準のファビコンやAndroid用アイコンもまとめて設定するのが実務上の定番です。以下をコピーしてお使いください。

<!-- 標準ファビコン -->
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/svg+xml" href="/icon.svg">

<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- Android / PWA -->
<link rel="manifest" href="/site.webmanifest">

SVGファビコンの設定やダークモード対応について詳しく知りたい方は、以下を参照してください。

ファイル名とパスの注意点

ファイル名はapple-touch-icon.pngが標準です。過去のiOSではこの名前でルートディレクトリに配置するだけで自動検出される仕様がありましたが、現在のiOS Safariではこの自動アクセスは行われない、または非常に限定的です。<link>タグでの明示的な指定が必須と考えてください。
href属性にはルート相対パス（/apple-touch-icon.png）を使うのが安全です。相対パスだとサブページで正しく読み込まれない可能性があります。
ファイルはPNG形式に限定されます。JPGやSVGは使えません。

iOSの自動処理（角丸・影・グロス効果）

Apple Touch Iconを設定する際に知っておきたいのが、iOSが画像に自動的に適用する加工処理です。

角丸マスク

iOSはホーム画面にアイコンを表示する際、自動的に角丸（ラウンドレクト）のマスクを適用します。そのため、画像自体に角丸処理をする必要はありません。正方形のまま書き出してください。

もし自分で角丸を付けた画像をアップロードすると、iOSの角丸マスクとの二重適用で四隅に不自然な余白が出てしまいます。

グロス効果（光沢）

iOS 6以前では、アイコンに自動でグロス（光沢）エフェクトがかかっていました。当時はこれを防ぐためにrel="apple-touch-icon-precomposed"という指定がありましたが、iOS 7以降ではグロス効果は完全に廃止されています。

現在はrel="apple-touch-icon"とrel="apple-touch-icon-precomposed"の動作に違いはありません。新規サイトではrel="apple-touch-icon"だけを使えば問題ありません。

影・ドロップシャドウ

iOSはアイコンの下に薄い影（ドロップシャドウ）を自動的に付けます。この処理はオフにできないため、画像側で影を入れる必要はありません。

まとめ：画像側でやること・やらないこと

処理	画像側で必要？	理由
角丸	不要	iOSが自動適用
グロス効果	不要	iOS 7以降で廃止済み
影	不要	iOSが自動適用
背景色の塗りつぶし	必要	透過部分は黒になる

デザインのコツ

Apple Touch Iconはネイティブアプリのアイコンと並んで表示されるため、通常のファビコン以上にデザインの質が問われます。

Safe Areaを意識する

iOSの角丸マスクによって、画像の四隅は切り取られます。重要な要素（ロゴ、文字など）は中心から約80%の範囲内に収めてください。具体的には、180x180pxの画像であれば、上下左右に約18pxずつの余白を確保すると安全です。

背景色は必ず塗る

Apple Touch Iconでは透過PNG（アルファチャンネル）は非推奨です。iOSはアイコンの透過部分を黒で塗りつぶすため、背景が透明な画像をそのまま使うと黒背景のアイコンになってしまいます。

必ず背景色を塗りつぶした状態で書き出しましょう。サイトのブランドカラーやロゴの背景色を使うのが一般的です。白い背景でも構いませんが、ホーム画面の壁紙が白の場合は境界がわかりにくくなるため、薄いグレーやブランドカラーのほうが視認性が高くなります。

1色ベタ塗り＋シンボルがベスト

Apple Touch Iconは60x60pt（物理的に約3:1の比率でRendered）程度の小さなサイズで表示されます。複雑なグラデーションや細かいディテールはつぶれてしまうため、シンプルなデザインほど効果的です。

多くの有名サービスがやっているように、ブランドカラーのベタ塗り背景＋白抜きのシンボルやロゴマークという構成が、視認性・ブランド認知ともに優れています。

テキストを入れるなら1〜2文字まで

アイコン内にテキストを入れる場合は、サイト名の頭文字1文字が限度です。フルネームやURLは絶対に読めません。太めのウェイト（Bold以上）を使い、背景色との十分なコントラストを確保してください。

Apple Touch Iconの作成方法

Apple Touch Iconの画像（180x180pxのPNG）を作成する方法はいくつかあります。

方法1：一括生成ツールで全プラットフォーム分をまとめて作る（おすすめ）

当サイトのアプリアイコン一括生成ツールを使うと、1枚の画像からApple Touch Iconを含む全プラットフォームのアイコンを一括で生成できます。

元画像（512x512px以上の正方形PNG推奨）をアップロード
生成するアイコンセットを選択（Apple Touch Iconはデフォルトで含まれます）
「ZIPダウンロード」で全ファイルとHTMLスニペットを取得

ZIPの中にapple-touch-icon.png（180x180）が含まれているので、それをサイトのルートに配置し、同梱のHTMLコードを<head>にコピーするだけで設定完了です。

アプリアイコン一括生成全プラットフォーム対応のアイコンをZIPで一括ダウンロード

方法2：変換ツールで180x180のPNGを直接作る

すでにロゴ画像があり、Apple Touch Icon単体だけが必要な場合は、画像→ファビコン変換ツールでPNG出力が可能です。

ロゴ画像をアップロード
出力サイズで180x180を選択
PNGでダウンロード

画像→ファビコン変換ツール画像をマルチサイズ対応のICOファビコンに変換

方法3：デザイナーツールでゼロから作る

ロゴがまだない場合は、ファビコンデザイナーで図形やテキストを組み合わせてアイコンを作成できます。背景色の設定、文字の配置、図形の重ね合わせなど、ブラウザ上で完結します。

いずれの方法でも、画像はすべてブラウザ内で処理されるため、サーバーへのアップロードは発生しません。

ファビコン作成の全体的な流れは以下の記事で詳しく解説しています。

WordPressでの設定方法

WordPressサイトにApple Touch Iconを設定する方法は、大きく2通りあります。

方法1：カスタマイザーから設定（推奨）

WordPress 4.3以降であれば、管理画面からの設定が最も簡単です。

「外観」→「カスタマイズ」→「サイト基本情報」を開く
「サイトアイコン」セクションで512x512px以上のPNG画像をアップロード
「公開」をクリック

WordPressは、アップロードした画像から自動的にApple Touch Icon（180x180）を含む複数サイズのアイコンを生成し、HTMLにも自動で<link rel="apple-touch-icon">タグを出力します。特にコードを触る必要はありません。

方法2：テーマファイルに直接記述

テーマのfunctions.phpやヘッダーテンプレートに手動で追記する方法です。カスタマイザーの自動生成を使わず、自分で最適化した画像を指定したい場合に向いています。

// functions.php に追加
function custom_apple_touch_icon() {
    echo '<link rel="apple-touch-icon" sizes="180x180" href="' . get_template_directory_uri() . '/assets/apple-touch-icon.png">';
}
add_action('wp_head', 'custom_apple_touch_icon');

テーマのassetsディレクトリ（またはお好みの場所）にapple-touch-icon.pngを配置してください。

WordPressのファビコン設定全般について詳しくは、以下の記事をご覧ください。

Web App Manifest（manifest.json）との関係

PWA（Progressive Web App）では、site.webmanifest（旧称manifest.json）にアイコンを定義します。ここで「Apple Touch Iconとマニフェストのiconsは何が違うのか？」という疑問が出てきます。

iOSのSafariはmanifestのiconsを使うのか？

Safari 15.4（2022年3月リリース）以降、iOSのSafariもマニフェストファイルのiconsを読み取るようになりました。しかし、<link rel="apple-touch-icon">が同時に存在する場合はそちらが優先されます。

つまり、実務上は以下のように両方を設定しておくのが確実です。

<!-- Apple Touch Icon（iOS Safari用） -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- Web App Manifest（Android Chrome / PWA用） -->
<link rel="manifest" href="/site.webmanifest">

{
  "name": "サイト名",
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

なぜ両方必要なのか

項目	apple-touch-icon	manifest icons
iOS Safari	優先	フォールバック
Android Chrome	使わない	優先
デスクトップPWA	使わない	優先

Android ChromeはApple Touch Iconを参照しません。逆に、iOS Safariはマニフェストよりもapple-touch-iconを優先します。このため、両方を設定しておくことでクロスプラットフォームでの表示を確実にカバーできます。

また、デスクトップ環境のChrome/EdgeなどでPWAとしてインストールした際に、マニフェストのアイコン読み込みに失敗した場合、apple-touch-iconがフォールバックとして参照されるケースもあります。apple-touch-iconを設定しておくことは、マニフェスト設定に不備があった場合の保険としても機能します。

当サイトの一括生成ツールでは、Apple Touch Icon・Android用アイコン・マニフェストファイル・HTMLスニペットをすべてまとめて生成できるので、個別に管理する手間が省けます。

Safari固有のトラブルシューティング

Apple Touch Iconを設定してもSafariで正しく表示されない場合、Safari特有の問題が原因のことがあります。

Safariのファビコンキャッシュが更新されない

Safariはファビコンやタッチアイコンを強くキャッシュします。アイコンを差し替えても、Safariのキャッシュが原因で古いアイコンが表示され続けることがあります。

macOSの場合：

Safariを完全に終了する
以下のフォルダを開き、中身を削除する

~/Library/Safari/Favicon Cache/
~/Library/Safari/Touch Icons Cache/

Safariを再起動してアクセスする

iPhone（iOS）の場合：

iOSにはファビコンキャッシュを個別に削除する方法がありません。以下の手順で対処します。

設定 > Safari > 履歴とWebサイトデータを消去 でキャッシュを全削除する
ホーム画面に追加したWebクリップを一度削除し、再度追加する

BASIC認証下でアイコンが読み込まれない

開発中やステージング環境でBasic認証をかけていると、Safariがapple-touch-iconのファイルを認証なしで取得しようとして失敗します。特にiPhoneのホーム画面追加では認証情報が引き継がれないため、アイコンが表示されません。

これは仕様上の制限なので、本番環境でBasic認証を外せば解決します。

iOS Safariのタブバーにファビコンが表示されない

iOS 15以降のSafariではタブバーにファビコンが表示されますが、設定によっては無効になっていることがあります。

エンドユーザー側の確認： 「設定」アプリ > Safari > タブバーにアイコンを表示 がオンになっているか確認してください。

開発者側の確認： <link rel="icon"> または <link rel="apple-touch-icon"> が正しく設定されていれば、開発者側の追加対応は不要です。

ファビコンが表示されない問題の総合的なトラブルシューティングは以下の記事で解説しています。

よくある質問

Q. Apple Touch Iconを設定しないとどうなる？

iOSユーザーがサイトをホーム画面に追加したとき、ページのスクリーンショットが縮小されたものがアイコンになります。見栄えが悪く、他のアプリアイコンと比べて浮いてしまうため、ブランドイメージの観点からも設定しておくことを強く推奨します。

Q. JPGやSVGでも使える？

いいえ。Apple Touch IconはPNG形式のみ対応です。JPGやSVGは認識されません。既存の画像がJPGやSVGの場合は、当サイトの変換ツールでPNGに変換してから使用してください。

Q. 透過PNGを使うとどうなる？

透明な部分が黒で塗りつぶされて表示されます。Apple Touch Iconには必ず背景色を付けた状態で書き出してください。白背景でも構いませんが、透過は避けてください。

Q. apple-touch-icon-precomposedはまだ必要？

不要です。apple-touch-icon-precomposedはiOS 6以前のグロス（光沢）効果を無効にするための指定でしたが、iOS 7以降ではグロス効果自体が廃止されています。現在はapple-touch-iconのみで問題ありません。古い記事やジェネレーターが出力するコードにprecomposedが含まれていることがありますが、動作に違いはないので気にする必要はありません。

Q. Android端末でもApple Touch Iconは表示される？

一部のAndroidブラウザ（古いバージョンのChrome等）がapple-touch-iconをフォールバックとして参照するケースはありますが、Android Chromeは基本的にsite.webmanifestのiconsを使用します。Androidへの対応は、Web App Manifestで192x192と512x512のアイコンを指定するのが正式な方法です。

まとめ

Apple Touch Iconの設定に必要なポイントを整理します。

項目	内容
サイズ	180x180px（1枚でOK）
形式	PNG（透過不可）
ファイル名	`apple-touch-icon.png`
HTML	`<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">`
角丸	自分で付けない（iOSが自動適用）
背景	必ず塗りつぶす（透過は黒になる）
precomposed	不要（iOS 7以降は区別なし）

設定の手順はシンプルです。

180x180pxの正方形PNG画像を用意する（一括生成ツールまたは変換ツールで作成）
apple-touch-icon.pngとしてサイトのルートディレクトリに配置する
HTMLの<head>に<link rel="apple-touch-icon">を追加する

この3ステップだけで、iOSユーザーのホーム画面にブランドアイコンが表示されるようになります。ファビコン全体の設定方法を確認したい場合は、以下の記事も参考にしてください。