favicon.icoのリンクタグを追加する必要がありますか？

favicon.icoを自動的に検出しない最新のブラウザーはありますか？favicon.icoのリンクタグを追加する理由はありますか？

<link rel="shortcut icon" href="/favicon.ico">

私の推測では、GIFまたはPNGを使用する場合は、HTMLドキュメントに含める必要があるだけです...

ファビコン用に別の場所またはファイルタイプ（PNGやSVGなど）を選択するには、
1つの理由として、アイコンを特定の場所（たとえば、画像フォルダーなど）に配置することが考えられます。例えば：

<link rel="icon" href="_/img/favicon.png">

SOがと関係しているように、この異なる場所はCDNである場合もあります<link rel="shortcut icon" href="http://cdn.sstatic.net/stackoverflow/img/favicon.ico">。

PNGなどの他のファイルタイプの使用について詳しくは、こちらの質問をご覧ください。

キャッシュ無効化の目的：
キャッシュの無効化の目的のためにパスにクエリ文字列を追加します。

<link rel="icon" href="/favicon.ico?v=1.1"> 

ファビコンは非常に大量にキャッシュされるため、更新を確実に行うための優れた方法です。

デフォルトの場所に関する脚注：
質問の最初の部分まで：すべての最新のブラウザーはデフォルトの場所でファビコンを検出するため、それをに使用する理由にはなりませんlink。

脚注rel="icon"：@Semaninoの回答で
示されているように、使用は古いバージョンのInternet Explorerで必要とされていた古い手法ですが、ほとんどの場合、より適切な命令に置き換えることができます。これに基づく@Semaninoの記事は、の値が有効なオプションではないことを示す適切な仕様に適切にリンクしています。rel="shortcut icon"rel="icon"relshortcut

W3CのHTML5仕様とWhatWGが標準化していることに注意してください。

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

「rel」属性の値に注意してください！

値shortcut iconのためのrel属性は、非常に古いInternet Explorerの特定の拡張機能であり、非推奨しました。

したがって、これを使用せずにファイルを更新して、標準に準拠し、すべてのブラウザで正しく表示されるようにすることを検討してください。

次のすばらしい投稿もご覧ください：rel = "shortcut icon"は有害と見なされています

<link rel="icon" type="image/x-icon" href="http://example.com/favicon.ico" />
<link rel="icon" type="image/png" href="http://example.com/favicon.png" />
<link rel="icon" type="image/gif" href="http://example.com/favicon.gif" />
<link rel="icon" type="image/jpeg" href="http://example.com/favicon.jpeg" />
<link rel="icon" type="image/webp" href="http://example.com/favicon.webp" />

それはすべて、使用する画像の形式によって異なります！
あなたのウェブサイトのアイコンがあれば、それはUXにとってはるかに良いでしょう！

デモ

ブラウザのタブにロゴを表示する

プラットフォーム固有のサイズのすべてのデバイスを追加できます

<link rel="apple-touch-icon" sizes="57x57" href="fav_icons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="fav_icons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="fav_icons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="fav_icons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="fav_icons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="fav_icons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="fav_icons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="fav_icons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="fav_icons/apple-icon-180x180.png">

<link rel="icon" type="image/png" sizes="192x192"  href="fav_icons/android-icon-192x192.pn">
<link rel="icon" type="image/png" sizes="32x32" href="fav_icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="fav_icons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="fav_icons/favicon-16x16.png">

一番下の行は、すべてのブラウザが実際にfavicon.icoファイルを探すわけではないということです。一部のブラウザでは、ユーザーが自動的に表示するかどうかを選択できます。したがって、常に表示されて見られるようにするために、定義する必要があります。