静的HTMLページへのファビコンの追加
私はサーバがダウンしたときに表示する、純粋なHTMLである静的ページをいくつか持っています。私が作ったfavicon（それは16x16pxで、HTMLファイルと同じディレクトリにあり、favicon.icoと呼ばれています）を "tab"アイコンとしてどのように置くことができますか？私はウィキペディアを読み、いくつかのチュートリアルを見て、以下を実装しました。
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
しかし、それでもまだ機能したくありません。サイトをテストするためにChromeを使用しています。 Wikipediaによると、.icoはすべてのブラウザタイプで動作する最高の画像フォーマットです。
更新
私はこれをローカルに動作させることはできませんでしたが、コードがチェックアウトすると、サーバーがサイトの提供を開始した後にのみ正しく動作するようになります。サーバーにプッシュしてキャッシュを更新するだけでうまくいきます。
16×16の.pngを作成してから、静的HTML文書の<head>タグの間に次のスニペットのいずれかを使用できます。
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<link rel="shortcut icon" type="image/png" href="http://example.com/favicon.png"/>
ほとんどのブラウザは、サイトのルートディレクトリからfavicon.icoを取得する必要はありません。しかし、彼らは常に新しいものにそれを更新するとは限りません。
しかし、私は通常あなたの例の2番目に行きます：
<link rel='shortcut icon' type='image/x-icon' href='/favicon.ico' />
実際には、あなたのfaviconがすべてのブラウザで動作するようにするためには、正しいサイズとフォーマットで10枚以上の画像が必要です。
私はApp（ faviconit.com ）を作成したので、人々はこれらすべての画像と正しいタグを手で作成する必要はありません。
あなたがそれを好むことを願っています。
以下は私のために働きます...
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
this のようなツールを使用して画像ファイルをBase64文字列に変換してから、下のスニペットのYourBase64StringHereプレースホルダを文字列に置き換えて、その行をHTMLのheadセクションに置きます。
<link href="data:image/x-icon;base64,YourBase64StringHere" rel="icon" type="image/x-icon" />
これはブラウザで100％動作します。
W3.orgで推奨されているように 、これを実現するためにrel属性を使うことができます。
例：
<head>
<link rel="icon"
type="image/png"
href="http://example.com/myicon.png">
...
ファビコンがPNGタイプの画像の場合、Chromeの古いバージョンでは機能しません。ただし、FireFoxでは問題なく動作します。また、そのようなことに取り組んでいる間あなたのブラウザのキャッシュをクリアすることを忘れないでください。多くの場合、コードは問題ありませんが、キャッシュが本当の原因です。
使用法の構文： .ico、.gif、.png、.svg
この表は、主要なブラウザでのfaviconの使用方法を示しています。標準実装では、文書のセクションにあるrel属性を持つlink要素を使用して、ファイル形式とファイル名と場所を指定します。
ほとんどのブラウザはfavicon.icoファイルを優先 _をWebサイトのルートに配置します（したがって無視すべてのアイコンリンクタグ）。
Edge Firefox Chrome I.E. Opera Safari
---------------------------------------- ------ --------- -------- ------ ------- --------
<link rel="shortcut icon" Yes Yes Yes Yes Yes Yes
href="http://example.com/myicon.ico">
<link rel="icon" Yes Yes Yes 9 Yes Yes
type="image/vnd.Microsoft.icon"
href="http://example.com/image.ico">
<link rel="icon" type="image/x-icon" Yes Yes Yes 9 Yes Yes
href="http://example.com/image.ico">
<link rel="icon" Yes Yes Yes 11 Yes Yes
href="http://example.com/image.ico">
<link rel="icon" type="image/gif" Yes Yes Yes 11 Yes Yes
href="http://example.com/image.gif">
<link rel="icon" type="image/png" Yes Yes Yes 11 Yes Yes
href="http://example.com/image.png">
<link rel="icon" type="image/svg+xml" Yes Yes Yes Yes Yes Yes
href="http://example.com/image.svg">
ファイルフォーマットのサポート
次の表は、faviconに対するイメージファイル形式のサポートを示しています。
Animated
Browser ICO PNG GIF GIF's JPEG APNG SVG
------------------- ----- ------ ------ ------- ------ ------ ------
Edge Yes Yes Yes No ? ? ?
Firefox 1.0 1.0 1.0 Yes Yes 3.0 41.0
Google Chrome Yes Yes 4 No 4 No No
Internet Explorer 5.0 11.0 11.0 No No No No
Safari Yes 4 4 No 4 No No
Opera 7.0 7.0 7.0 7.0 7.0 9.5 44.0
ブラウザの実装
以下の表は、ファビコンが表示されるブラウザのさまざまな領域を示しています。
Address Address bar 'Links' Drag to
Browser Bar drop-down bar Bookmarks Tabs desktop
------------------- ------------ ----------- --------- ----------- ------ ---------
Edge No Yes Yes Yes Yes Yes
Firefox until v12 Yes Yes Yes Yes Yes
Google Chrome No No Yes Yes 1.0 No
Internet Explorer 7.0 No 5.0 5.0 7.0 5.0
Safari Yes Yes No Yes 12 No
Opera v7–12: Yes No 7.0 7.0 7.0 7.0
> v14: No
アイコンファイルのサイズは、16×16、32×32、48×48、または64×64ピクセルです。色深度で8ビット、24ビット、または32ビット。
上記の情報は一般的に正しいものですが、特定の状況ではいくつかのバリエーション/例外があります。
ウィキペディアの ソース にある記事全文を参照してください。
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<link rel="shortcut icon" type="image/ico" href="http://example.com/favicon.ico"/>
これは私のために働きました
<link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
<link rel="shortcut icon" type="image/ico" href="http://example.com/favicon.ico"/>
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<link rel="shortcut icon" type="image/png" href="http://example.com/favicon.png"/>
私はその古い投稿を知っていますが、それでも私のような人のために投稿しています。これは私のために働きました
<link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
faviconアイコンをルートディレクトリに置きます。
いつか誰かに役立つかもしれない追加のメモとして。
前にページに何もエコーすることはできません。
Hello
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
icoをロードしません
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
Hello
正常に動作します
私は自分のイメージを変換するのにconvert -resize 16x16 img.png favicon.ico（linux konsole上）を使い、そして私のヘッダに<link rel="icon" href="images/favicon.ico" type="image/png" sizes="16x16">を加えるとすべてが完璧に動作します。
Favicon.icoブラウザという名前でfaviconをroot/imagesフォルダに追加すると、自動的にそれが理解され、favicon.Iとして取得されます。あなたのリンクはwww.website.com/images/favicon.icoでなければなりません
詳細については、この答えを見てください。
<link rel = "icon" href = "favicon.ico" type = "image/x-icon" />を含める必要がありますか。
あなたのサイトがsubfolderとして実行されている場合は、次の点に注意してください。
http://localhost/MySite/
あなたはそれを考慮に入れる必要があるでしょう。あなたがASP.NETappからそうしているならば、あなたがする必要があるのはURLの前に~を加えることだけです：
<link rel="shortcut icon" type="image/x-icon" href="~/favicon.ico" />
<link rel="icon" type="image/ico" href="images/favi.ico"/>を使ってみる
FFは、//のように冗長な/img//favicon.pngを含むアイコンをURLにロードできないことに注意してください。 FF 53でテスト済み。ChromeはOKです。