Chromeではアイコンが表示されるのにYandexでは表示されない、またはYandex Searchの検索結果にアイコンがない場合、別々の二つの仕組みを見ている可能性があります。Yandexでfaviconが表示されないのは、Yandex Browserが画像を読み込めない-kn—or Yandex Searchがインデックス済みのページのアイコンを更新していないためです。

クイック修正：Yandexでfaviconが表示されない場合

まず、アイコンがどの場所に表示されていないかを特定してください。タブ、アドレスバー、ブックマーク、検索結果のいずれかです。BrowserとSearchでは更新経路が異なるため、タブでは表示されていても、検索結果側まで最新であるとは限りません。

  1. 宣言を確認する。 ページのソースを表示し、relにiconを含むlink要素を探してください。存在しない場合は、ドキュメントのhead内に追加します。
  2. 正確なファイルURLをテストする。 hrefの値を新しいタブで開いてください。404ページ、ログイン画面、HTMLのエラードキュメントではなく、画像そのもの단이返る必要があります。
  3. ルート相対のフォールバックを使う。 有効なICOファイルを/favicon.icoに配置し、そのパスを明示的に指定してください。これにより、ネストされたページでのルートの曖昧さが解消されます。
  4. 古いキャッシュを回避する。 タブを閉じ、キャッシュを無効にした状態で再読み込みしてから、もう一度ページを開いてください。/favicon.ico?v=2のような一時的な値を使うと、キャッシュの不一致が原因かを 확인할ことができます。
  5. 検索側は個別に更新する。 ファイルを直接開けるにもかかわらずYandex Searchにアイコンがない場合は、ページが想定したURLでインデックスされているか確認してください。Yandex Webmasterを使用している場合は、アイコンを繰り返し変更するのではなく、再インデックス用の正しいURLを提出してください。

最初に確認する段階では、次の簡潔で統一された宣言があれば十分です。

<link rel='icon' href='/favicon.ico'>

利用している構成でSVGがサポートされている場合は、SVGの候補も追加できます。

<link rel='icon' type='image/svg+xml' href='/favicon.svg'>

HTML標準では、外部リソース向けのicon link relationと、その任意のsizes属性が定義されています。宣言したサイズは、配信するファイルに合わせてください。

Yandexだけで発生する問題の根本原因

1. パスは正しく見えるが、別のリソースに解決される

相対的なicon URLは、ページのbase URLを基準に解決されます。https://example.com/products/item/ では、href='favicon.ico' がサイトルートではなく現在のパス配下を指す可能性があります。base 要素やframeworkが生成するURLによって、その結果が変わることもあります。

Networkパネルを開き、iconのリクエストで絞り込み、最終URLを確認します。/products/item/favicon.ico と /favicon.ico は、プロジェクトツリー上で両方に見慣れた名前Despiteواردا異なるリソースです。

2. Serverが画像を返さない

build folder内にfileがあっても、live siteでは読み込まれないことがあります。古いdeploymentが残っていないか、filenameの大文字と小文字が一致しているか、CDN pathがブロックされていないか、redirect loopやauthentication ruleがないかを確認してください。

Response status、final URL、content typeを調べます。ICOにはicon media typeが必要で、SVGとPNGにはそれぞれ対応するimage typeが必要です。Response bodyがHTMLなら、browserがiconではなくerror pageを取得Coursilientしています。

3. Search resultとbrowser tabでは状態が異なる

Tabには、表示中のページからiconが読み込まれます。一方、Yandex Searchのlistingには、以前のcrawlで取得した情報が反映されている場合があります。そのため、liveなtabでは正しく表示されていても、検索結果にはiconが表示されない거나古いiconが残ることがあります。

まず、resultのdestination URLを確認します。古いURL、staging page、redirect、または別のindexed versionを指している場合は、現在のページだけを変更しても、そのlistingを修正できない可能性があります。faviconはpublicかつstableに保ち、利用可能なwebmaster toolsからrefreshを依頼してください。

4. Cacheやduplicate linkにより、正しいfileが判別されない

Yandex Browserは、一度取得したiconを保持することがあります。また、serverやCDNが古いdeploymentを保持していることもあります。/favicon-v2.ico のようなversion付きfilenameを使うと、古いrequest pathを明示できます。ただし、HTML linkも同時に更新する必要があります。

注入されているicon linkもすべて確認してください。CMSのtheme、plugin、templateが別の rel='icon' declarationを追加し、異なるpathを持つ2つの候補が残る場合があります。選択順に依存せず、意図しないduplicateを削除してください。

Prevention：faviconを予測可能にする

最終確認

直接リクエストが失敗する場合は、Yandex の問題を扱う前に配信処理を修正します。直接リクエストが成功しているのに検索結果が誤っている場合は、インデックス登録済み URL と再クロール経路を修正します。この切り分けによって、漠然とした favicon の問題は、通常は完了できる 2 つの確認に分けられます。

ブラウザ側のより広範なチェックリストは favicon が表示されない？ 7 つの原因とクイックフィックス を参照してください。検索エンジンを比較している場合は、Google のルールは Yandex とは別です。Yandex が同じ判定基準を使うとは仮定せず、Google favicon チェックリスト を確認してください。

Mzu favicondl を使えば、root path に公開する前にクリーンな ICO または PNG のフォールバックを準備できます。決め手となるのは、Yandex が利用できる最終 URL、レスポンス、refresh path です。