favicon.ico についていくつか注意点があります (ルートディレクトリに置くのがベストです)

任意のウェブページを開きます。例: http://www.baidu.com/

ブラウザのタブのヘッダーにアイコンが表示されているのがわかります。このアイコンは次のとおりです。 これはよく favicon.ico と呼ばれます。

この記事では主に favicon.ico と、各ブラウザーがそれを処理するさまざまな方法について説明しているため、次のように新しい Web プロジェクトを作成します。

ファイアフォックス:

つまり9:

残念ながら、一般ユーザーのほとんどは、360ブラウザ、Sogouブラウザ、QQブラウザなどを使用しています。

Sogouブラウザ:

ウェブサイトのルートディレクトリにある favicon.ico が有効になっていることがわかり、ウェブサイトのルートディレクトリにある favicon.ico アイコンが表示されます。

360 ブラウザを開きます:

不思議ですね、Google アイコンはどこから来たのでしょうか? 。 。 。 ? ? ?

faviconTestWeb にはアイコンが 3 つしかなく、そのうちの 1 つは wangyi.ico.baidu.ico.favicon.ico (cnblogs のアイコン) です。

360 に Google アイコンが表示されるのはなぜですか?

実際、360ブラウザがWebを閲覧する場合、ポートは無視されます。つまり、http://localhost:3529/home.htmlです。

Firefox はリンクの href に対応するアイコンを要求します。

Sogou Browser 等: リクエストは http://localhost:3529/favicon.ico です。

360ブラウザなど: リクエストはhttp://localhost/favicon.icoです。

つまり、http://host/home.html、http://host:333/home.html、または http://host/test/home.html のいずれをリクエストしても同じです。

http://host/favicon.ico を要求します。

証拠は、360se インストール ディレクトリを開くことです。

したがって、Web サイトの favicon.ico が機能しない場合、または favicon.ico の互換性を高めたい場合は、次の手順に従います。

1: ウェブサイトのルート ディレクトリにある favicon.ico を確認します。つまり、http://host/some/favicon.ico ではなく、http://host/favicon.ico です。

2: <link rel="icon" href="http://host/favicon.ico" type="image/x-icon" /> を確認してください。

<link rel="ショートカットアイコン" href="http://host/favicon.ico" type="image/x-icon" />

http://host/favicon.ico を使用する

3: ウェブサイトにポートがある場合、またはテスト バージョンである場合は、favicon.ico を要求するときにポート番号を無視する 360 などのブラウザーに特に注意してください。