Chromeで新しいタブを開くと、自分のロゴの代わりに小さなグレーの地球が見えます。プレースホルダーのように見えますが、実際にそう，那就是、ブラウザがページに有効なアイコンを見つけられない、または読み込めない場合のフォールバックです。

この entourage Brentでは、地球アイコンの意味、Chromeがそれを選ぶ理由、そして自分のfaviconに置き換える方法を説明します。焦点は(cache)トラブルシューティング全般ではなく、地球アイコン自体に絞ります。

Chromeのデフォルトfavicon地球アイコンとは実際に何か

Chromeは、すべての instinctivelyPXにPX単一の地球アイコンをハードコードして同梱しているわけではありません。この地球アイコンは、利用可能なアイコンがない場合に表示される汎用的なプレースホルダーです。タブバー内の空のスロットに視覚的に相当的东西です。

HTML標準では、ページがアイコンを宣言する方法を定めています。document head内の<link rel='icon'>要素です。仕様はWHATWG HTML: rel=iconで確認できます。この宣言がない、壊れている、またはChromeがデコードできないファイルを指している場合、ブラウザは地球アイコンにフォールバックします。

自分のアイコンの代わりに地球アイコンが表示される理由

ほとんど Lurksするケースは、いくつかのパターンに分類できます。一般的な例は次のとおりです。

いずれの場合も、詳細なキャッシュ調査は必要ありません。地球アイコンは、通常、アイコンが最初から正しく解決されなかったことを示しています。

Chromeがアイコンと地球アイコンを選ぶ方法

Chromeはdocument head内のアイコンリンクを読み取り、デコードできる候補を選びます。SVGとPNGの両方を指定した場合、ブラウザは最もよくサポートされているフォーマットを使用します。すべての候補に失敗すると、地球アイコンが表示されます。

最小限で信頼できる宣言は、次のようになります。

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

この2つの宣言により、Chromeがアイコンを取得できる機会を2回設けられます。favicon link tagの構造について詳しく知りたい場合は，相关ガイドを参照してください。

地球儀アイコンを回避するベストプラクティス

地球儀アイコンを非表示にするために多数のファイルは必要ありませんが、少なくとも1つは有効で、到達可能なアイコンが必要です。実践적인ルールをいくつか挙げます。

  1. 暗黙のrootリクエストに依存せず、head内にアイコンを明示的に宣言してください。
  2. ファイルがHTMLのエラーページにリダイレクトされず、実際にHTTP 200を返すことを確認してください。
  3. 古い、またはより厳格なパーサーに対応するため、SVGと 함께PNGのfallbackも用意してください。
  4. 以前キャッシュされた地球儀アイコンを誤認しないよう、新しいChrome profileまたはincognito windowでテストしてください。

アイコンが正しく宣言されているにもかかわらず、Chromeが地球儀アイコンを表示する場合、原因son'smissing fileではなく、古いキャッシュのエントリであるoftenです。具体的なキャッシュの挙動については、Chromeでfaviconが表示されない場合の記事で説明しています。

おわりに

地球儀アイコンはbugではありません。Chromeが利用可能なアイコンを見つけられなかったことを示しています。有効なrel='icon' linkを宣言し、ファイルが正しく配信されていることを確認すれば、地球儀アイコンは表示されなくなります。まず1つのSVGまたはPNGで動作を確認的基础上 Sichern Sie die Grundlagen, bevor Sie das vollständige Icon-Set erweitern.