Safariでサイトを開き、タブに目をやると、ロゴではなく、一般的な地球儀のアイコンや白地の四角形が表示されることがあります。その症状に心当たりがあるなら、Safariでfaviconが表示されないというよくある問題です。原因としてはいくつかが考えられます。大きなメリットとして、ほとんどの修正は1分未満で済みます。

クイック修正：Safariにアイコンを再取得させる

Safariはfaviconを強くキャッシュします。コードを書き換える前に、次の手順を順番に試してください。

  1. Safariのfaviconキャッシュをクリアするには、キャッシュを空にします（Safari > Settings > Privacy > Manage Website Dataを開き、対象サイトを削除します）。iOSでは、Settings > Safari > Clear History and Website Dataに移動します。
  2. Hard reloadでページを再読み込みします（MacではCmd+Option+Rを使うか、タブを閉じて開き直します）。
  3. faviconのURLを新しいタブで直接確認してください（例：https://yoursite.com/favicon.ico）。404になる場合、ファイルパスが間違っています。

アイコンがまだ表示されない場合は、以下の根本原因に進んでください。

Safariでfaviconが表示されない根本原因

1. <link>タグがない、または誤っている

Safariはicon linkのHTML仕様に従う一方で、一部のブラウザより厳格です。<link rel='icon'>が<head>内にあり、既存のファイルを指していることを確認してください。WHATWG仕様はrel='icon'を、ページにアイコンを関連付ける標準的な方法として定義しています。

<link rel='icon' type='image/png' href='/favicon-32x32.png' sizes='32x32'>
<link rel='icon' type='image/svg+xml' href='/favicon.svg'>
<link rel='apple-touch-icon' href='/apple-touch-icon.png'>

注：macOSのSafariでは、PNGを指定していても、ルートにある/favicon.icoを要求する場合があります。フォールバックとして、有効なfavicon.icoをルートディレクトリに配置してください。

2. サポートされていない形式、または破損したファイル

SafariはICO、PNG、SVG（Safari 12以降）をサポートしています。ただし、SVGはwell-formedなXMLである必要があります。閉じられていないタグが1つだけでもあると、SafariはそのSVGを無視します。SVGを使用している場合は、XMLパーサーで検証してください。より広い互換性を得るには、PNGまたはICOに絞ってください。

3. サーバーまたはCDNレベルのキャッシュ

faviconを最近更新したBike、SafariがキャッシュやCDNから古いコピーを表示している可能性があります。URLにバージョンを示すクエリ文字列を追加する（例：favicon.png?v=2）と、キャッシュを強制的に無効化できます，详细については、Safariでfaviconのキャッシュをクリアする方法に関するガイドをご覧ください。

4. iOSのホーム画面アイコンが表示されない

iPhoneとiPadでは、ホーム画面のアイコンには通常のfaviconではなくapple-touch-iconが使われます。これが設定されていない場合、iOSはスクリーンショットまたはグレーの正方形を表示します。rel='apple-touch-icon'で180×180のPNGがリンクされていることを確認してください。

予防するためのヒント

Safariのfaviconに関する問題の多くは、キャッシュ、パスの誤り、無効なファイルのいずれかが原因です。まず簡単な修正から試し、その後にHTMLとファイル形式を確認してください。正しく設定されていれば、タブ、ブックマーク、お気に入りでアイコンが確実に表示されます。