<link rel =“ icon” href =“ favicon.ico” type =“ image / x-icon” />を含める必要がありますか?


205

次のコード行をヘッドタグに含めませんでしたが、私のファビコンは引き続きブラウザーに表示されます。

<link rel="icon" href="favicon.ico" type="image/x-icon" />

それを含める目的は何ですか?

回答:


174

ファビコンを呼び出さない場合はfavicon.ico、そのタグを使用して実際のパスを指定できます(images/ディレクトリにある場合)。ブラウザ/ウェブページはfavicon.icoデフォルトでルートディレクトリを探します。


3
または、ルートフォルダーにfavicon.icoがないが、たとえばアセットフォルダーにある場合
14

122

実際には両方を実行して、すべてのブラウザがアイコンを見つけるようにする必要があります。

ファイルに「favicon.ico」という名前を付け、それをWebサイトのルートに配置するのは、W3Cによって「推奨されない」方法です。

方法2(非推奨):ファビコンを事前定義されたURIに配置
するファビコンを指定する2番目の方法は、事前定義されたURIを使用して画像を特定することに依存します。一部のブラウザは、そのURIを使用してファビコンを探すようにプログラムされているため、この方法は機能します。
W3C-サイトにファビコンを追加する方法

したがって、すべての状況をカバーするために、「rel」属性を追加して同じ.icoファイルを指すように推奨される方法に加えて、常にそれを行います。


8
はい、これはより正しい答えです。favicon.icoルートに単純にa を配置することに関連する標準はありませんが、ほとんどのブラウザは歴史的な理由でこのファイルを自動的に要求します。
FABRICIOマット

10
これを行う適切な理由は、状況によっては機能しないためではなく、状況によってはより優れた方法が機能しないためです
Jasper

2
不思議なことに、realFaviconGeneratorは、HTMLヘッドでファビコンを宣言しないことを推奨しています。
Dan Dascalescu、2016年

7
Internet Explorer はファビコンを発明し、それをルートで探しました。私の知る限り、すべてのブラウザがこれを行います。これが、favicon.icoをルートに置くことをお勧めする理由です。そうしないと、404が返され、ほとんどのシステムはそれをキャッシュしないため、要求を続けます。そこにアイコンを置くと、適切にキャッシュされます。
Stijn de Witt 2017

50

私が使用する理由は2つあります。

  1. たとえば、クエリパラメータを追加することで、アイコンを強制的に更新できます?v=2。このような: <link rel="icon" href="https://stackoverflow.com/favicon.ico?v=2" type="image/x-icon" />

  2. パスを指定する必要がある場合。


すばらしい、ついに表示されなかった理由がわかりました。
whamsicore 2015

これは単なるタイプミスだったと思いますが、そこには相対的なhrefがあります。つまり、すべてのページが最上位にあるか、すべてのサブディレクトリにfavicon.icoファイルがないと機能しません。
Chris Cogdon 16

後の読者への参考までに、Chris Cogdonのコメントは編集で修正され、「Sep 9 '16 at 5:05」、もはや問題ではなくなりました
Daryn

13

単純にルートフォルダーに追加するだけでうまくいきますが、ファビコンを変更する必要がある場合、更新に数日かかることがあります。キャッシュを更新してもうまくいきません。


Ctrl-Cと再構築を忘れないでください。
Jason Glass

9

多くの人がCookieパスを/に設定しています。これにより、すべてのファビコン要求は、少なくともchromeで、サイトのcookieのコピーを送信します。ファビコンをcookielessドメインにアドレス指定すると、これが修正されます。

<link rel="icon" href="https://cookieless.MySite.com/favicon.ico" type="image/x-icon" />

取得するトラフィックの量によっては、これがリンクを追加する最も実用的な理由になる場合があります。

cookielessドメインの設定に関する情報:

http://www.ravelrumba.com/blog/static-cookieless-domain/

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.