favicon.icoを自動的に検出しない最新のブラウザはありますか？favicon.icoのリンクタグを追加する理由はありますか？
<link rel="shortcut icon" href="/favicon.ico">
私の推測では、GIFまたはPNGを使用する場合にのみ、HTMLドキュメントに含める必要があります...
質問する
187680 次
6 に答える
271
ファビコンに別の場所またはファイルタイプ（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の回答
で
示されているように、usingは古いバージョンのInternet Explorerで必要だった古い手法ですが、ほとんどの場合、より正しい命令に置き換えることができます。これに基づく@Semaninoの記事は、の値が有効なオプションではないことを示す適切な仕様に適切にリンクしています。rel="shortcut icon"rel="icon"relshortcut
于 2012-04-18T21:22:45.947 に答える
55
W3CのHTML5仕様とWhatWGの両方が標準化されていることに注意してください
<link rel="icon" href="/favicon.ico">
「rel」属性の値に注意してください！
属性の値shortcut iconはrel、非常に古いInternet Explorer固有の拡張機能であり、廃止されました。
したがって、これ以上使用せず、ファイルを更新して、標準に準拠し、すべてのブラウザで正しく表示されるようにすることを検討してください。
このすばらしい投稿もご覧ください：rel="ショートカットアイコン"は有害と見なされます
于 2015-06-30T07:36:49.743 に答える
13
<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にとってはるかに良いでしょう！
デモ
ブラウザタブにロゴを表示する
于 2016-11-24T17:13:50.887 に答える
3
2020年10月の更新：
したがって、このページで私のファビコンが機能しない理由に頭を悩ませている場合は、読み進めてください。私はすべてのことを試しましたが（おそらく私は正しくやっていると思っていました）、ファビコンはブラウザーのタブに表示されませんでした。
これが完璧に機能した1行の単純なクラッカーコードです。
<link rel="icon" href="https://abcde.neocities.org/bla123.jpg" size="16x16" type="image/jpg">
ノート：
- 画像をルートフォルダに入れます（失敗した試みの1つで、ルートディレクトリを使用していませんでした）
- （href = "images / bla123.jpg"の代わりに）直接ファビコンURLリンクを使用します。
- このタグを<ヘッダー>の<タイトル>タグのすぐ下に配置しました
- ファビコンのサイズを64x64ピクセルにし、サイズは2.16KBでした
Firefox、Chrome、Edge、オペラでテストしました。OS：Win 10、Mac OSX、iOS、Android。また、キャッシュの問題は発生せず、ページを更新するとすぐに機能しました。
于 2020-10-22T08:45:48.763 に答える
2
プラットフォーム固有のサイズのすべてのデバイスに追加できます
<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">
于 2018-05-14T13:10:39.513 に答える
1
肝心なのは、すべてのブラウザが実際にfavicon.icoファイルを検索するわけではないということです。一部のブラウザでは、ユーザーが自動的に表示するかどうかを選択できます。したがって、それが常に表示されて表示されるようにするには、それを定義する必要があります。
于 2012-04-18T21:35:43.663 に答える