Safariのファビコンキャッシュを消す方法：iPhoneとMacガイド

新しいfaviconをデプロイし、MacのSafariでキャッシュをクリアしたところ、タブには新しいアイコンが表示されるようになりました。それなのにiPhoneで同じサイトを開くと、まだ古いグレーのプレースホルダーのままです。これを修正するには、SafariのfaviconキャッシュをiPhoneとMacでそれぞれ個別にクリアする必要があります。2台のデバイスは独自のアイコンデータベースを保持しており、iCloud経由で同期されることは決してないためです。

iPhoneとMacでSafariのfaviconキャッシュの仕組みが異なる理由

Safariはfaviconデータを2層で保持しています。1つは一時的なブラウザキャッシュ、もう1つはタブ、ブックマーク、ホーム画面の「ホーム画面に追加」機能に利用する永続的な WebpageIcons データベースです。macOS上ではこのデータベースは ~/Library/Safari/WebpageIcons.db に存在します。iOSではSafariのアプリサンドボックス内に格納されているため、直接アクセスすることはできません。

この2つのキャッシュは互いに通信しません。Macでfaviconを更新してもiPhoneには反映されませんし、逆もまた同様です。そのため、同じサイトでもデバイスごとに異なるアイコンが表示されることがあります。

前提条件

サイトのルート、またはHTMLの <link rel='icon'> タグ経由でアクセス可能な、デプロイ済みのfaviconファイル
macOSではSafari 14以降、iPhoneではiOS 14以降
1デバイスあたり約2分

Macでfaviconキャッシュをクリアする方法

ステップ1：新しいfaviconが実際に公開されているか確認する

Safariを開いてサイトを読み込み、ソースを表示します（Cmd + Option + U）。<link rel='icon'> タグが新しいファイルを指し示していることを確認します。古いファイルパスがハードコードされている場合、キャッシュクリアでは解決しません。正しいタグについてはHTML faviconガイドを参照してください。

ステップ2：Safariの一時キャッシュを空にする

Safari → 設定 → 詳細 を開き、メニューバーに"開発"メニューを表示 を有効化します。続いて 開発 → キャッシュを空にする をクリックします。これでタブのレンダリングに使用される一時キャッシュは消去されますが、WebpageIconsデータベースには触れません。

ステップ3：WebpageIconsデータベースを直接削除する

Safariを完全に終了します（Cmd + Q）。ターミナルを開いて以下を実行します：

rm -f ~/Library/Safari/WebpageIcons.db
rm -f ~/Library/Safari/WebpageIcons.db-shm
rm -f ~/Library/Safari/WebpageIcons.db-wal

これらのファイルには、Safariがこれまでタブやブックマークで表示したすべてのfaviconが保存されています。これらを削除すると、次回起動時にSafariがアイコンデータベースを一から再構築します。

ステップ4：Safariを再起動してリロードする

Safariを再度開いてサイトを読み込みます。新しいfaviconがタブとブックマークバーに数秒以内に表示されるはずです。もし表示されない場合は、HTMLが依然として古いファイルパスを参照している可能性があります。

iPhoneでfaviconキャッシュをクリアする方法

iOSの手順は異なります。Safariのファイルシステムに直接アクセスできないため、設定からサイトデータを消去し、Safariに強制的にリフレッシュさせる方法になります。

ステップ1：Safariのウェブサイトデータを消去する

設定アプリを開き、Safari までスクロールして 詳細 → ウェブサイトデータ をタップします。すべてのウェブサイトデータを削除 をタップします。これで、すべてのサイトのcookie、キャッシュ、Safariのタッチアイコンストアが一括で消去されます。

注意：ログイン中のすべてのウェブサイトからログアウトされます。セッションを失わずにfaviconの変更だけを確認したい場合は、プライベートブラウジングセッションを利用してください。

ステップ2：Safariを強制終了する

下端から上にスワイプして（古いiPhoneの場合はホームボタンをダブルクリックして）Appスイッチャーを開き、Safariカードを上にスワイプして強制終了します。その後Safariを再度開いてサイトを読み込みます。

ステップ3：ハードリロードでキャッシュを回避する

Safariのアドレスバーにある更新ボタンを長押しし、デスクトップ用サイトを表示 をタップします。これを一度オンにしてからオフに戻します。これでfaviconファイルを含む新しいフェッチが強制されます。あるいは、クエリ文字列を付与してキャッシュをブレイクする方法もあります：

https://yoursite.com/?v=2

ステップ4：ホーム画面のアイコンキャッシュをリフレッシュする

iPhoneのホーム画面にサイトを追加している場合、そのアイコンは通常のfaviconではなく apple-touch-icon ファイルから取得されます。これをリフレッシュするには、ホーム画面のショートカットを一度削除し、再度追加します。SafariがHTML中の <link rel='apple-touch-icon'> タグを改めて読み込み、新しいコピーをダウンロードします。

よくある落とし穴

iCloudはキャッシュを同期しない：Macでクリアしても、iPhoneやiPadのキャッシュには影響しません。
Service Worker：サイトがService Workerを使用している場合、Cache APIから古いfaviconが配信されることがあります。Service Workerのバージョンを上げてリフレッシュを強制してください。
CDNエッジキャッシュ：faviconファイルがCDNエッジでキャッシュされている場合があります。HTMLタグ内のアイコンパスに ?v=2 のようなバージョンクエリを付与してください。
プライベートブラウジング：Safariのプライベートモードはそもそもfaviconキャッシュを永続化しません。プライベートモードで検証しても、通常モードと同じ挙動は確認できません。

今後のfaviconキャッシュ問題を防ぐには

両デバイスで新しいアイコンが正しく表示されるようになったら、コンテンツハッシュ付きのファイル名を利用して再発を防ぎましょう：

&lt;link rel='icon' href='/favicon.a1b2c3d4.svg' type='image/svg+xml'&gt;

デプロイごとに一意のURLになるため、ブラウザが古いキャッシュを配信することはなくなります。キャッシュバスタリングパターンの詳細な解説については、faviconキャッシュバスタリングガイドを参照してください。

rel='icon' 属性やブラウザが受け付けられるMIMEタイプに関する網羅的なリファレンスは、WHATWG HTML Living Standardを参照してください。