静的HTMLページへのファビコンの追加

641

純粋なHTMLである静的ページがいくつかあり、サーバーがダウンしたときに表示されます。作成したファビコン（16x16pxで、HTMLファイルと同じディレクトリにあります。favicon.icoと呼ばれます）を「タブ」アイコンとしてどのように配置できますか？私はウィキペディアを読み、いくつかのチュートリアルを見て、以下を実装しました。

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

しかし、それはまだ働きたくありません。Chromeを使用してサイトをテストしています。ウィキペディアによると、.icoはすべての種類のブラウザーで実行できる最高の画像形式です。

更新

これをローカルで機能させることはできませんでしたが、コードがチェックアウトするのは、サーバーがサイトへのサービスを開始して初めて適切に機能するためです。サーバーにプッシュしてキャッシュを更新するだけで、問題なく動作するはずです。

html  static  favicon 
— 伝説
ソース
他のシステムであなたのためにそれをチェックするようにあなたの友人に言っていない人、同じ問題は私のクライアントの1つが私のシステムがうまく表示され、ファビコンが表示されないという不平を言っています、私はほとんどあなたの最初の例を使用しますあたりです。幸運を祈ります。
— mt 2012年
3
— のMichałPerłakowski
あなたの例は現在Chromeで動作しています。
— Damjan Pavlica
興味深いことに、ライブWebサイトはファビコンを問題なく提供しましたが、ファイルをローカルで表示し、ローカルサーバーを介して提供しない場合（b / cは単純な静的サイト-そうです！）、ファビコンは表示されませんでした。後から考えると、サーバーが自動的に提供します。（32、16、および180のファビコンバリエーションの横に）を追加する<link rel="icon" type="image/x-icon" href="favicon.ico">と、ローカルで問題が解決しました。大きいアイコンサイズのとマニフェストを含めたので、なぜ表示されないのかについて2度考えませんでした。:-)headlinklinkfavicon.ico
— SherylHohman

回答:

934

.png画像を作成し、<head>静的HTMLドキュメントのタグ間で次のスニペットのいずれかを使用できます。

<link rel="icon" type="image/png" href="/favicon.png"/>
<link rel="icon" type="image/png" href="https://example.com/favicon.png"/>
— ぼんやりとしたマギー
ソース
3
icoリンクのrel =に「ショートカットアイコン」を配置し、両方にfavicon.icoの前に/を配置して、ウェブルートディレクトリにあることを示しましたか？
— Hazy McGee
1
イップはあまりにも...男笑私は..私はすべてのそれを再起動しようと思って評価して、ブートアップしてみてください、多分そのキャッシング間違っか何かかどうかを確認することを試みた
— TheLegend
5
私は誓います-コードを追加した後も同じ問題がありました-ブラウザーが通常持っている灰色のボックスの代わりにアイコンを表示するのに多分1日かかりました-ブラウザーのキャッシュ履歴などをダンプしてみてくださいexample.comをurドメインに変更しますlol
— Hazy McGee
2
先頭行のhref引数に冗長な/があります。削除すると、魅力のように機能します。<link rel = "shortcut icon" href = "favicon.png" type = "image / png">
— drpawelo
4
w3.org/2005/10/howto-faviconはタグにprofile属性を含めると言っていますhead...それは必要ですか？
— Rakib 14
228

ほとんどのブラウザはfavicon.ico、通知される必要なく、サイトのルートディレクトリから取得します。ただし、すぐに新しいものに更新されるとは限りません。

ただし、通常は2番目の例を使用します。

<link rel='shortcut icon' type='image/x-icon' href='/favicon.ico' />
— コードクラフト
ソース
メタデータまたはスクリプトタグより前である必要がありますか？問題ではない
— TheLegend 2012年
2
<head>セクションにある限り、それは問題になりません。他の機能に依存しないためです。
— Codecraft 2012年
126

実際、すべてのブラウザでファビコンを機能させるには、適切なサイズと形式の画像が10枚以上必要です。

アプリ（faviconit.com）を作成したので、人々はこれらすべての画像と正しいタグを手動で作成する必要はありません。

あなたがそれを好き願っています。

— エドゥアルドルッソ
ソース
6
アプリは大好きで、bsはありません-直接、画像はすべてのファビコンを作成する前に編集できるため、時間を節約できます:)
— SidOfc
1
これは素晴らしいアプリです。これらのすべての画像サイズが必要であるとは思えませんが、画像サイズと必要なマークアップなどが生成されるのが気に入っています。ありがとうございます。
— andrhamm
Indeead a great app：+1 :. o /
— Renato Gomes
1
しかし、それは独自のものです。
— ctrl-alt-delor 2018年
それは機能しません、与えるWhoops, looks like something went wrong.
— daka
40

このようなツールを使用して画像ファイルをBase64文字列に変換YourBase64StringHereし、以下のスニペットのプレースホルダーを文字列に置き換えて、HTMLヘッドセクションに行を配置します。

<link href="data:image/x-icon;base64,YourBase64StringHere" rel="icon" type="image/x-icon" />

これはブラウザで100％動作します。

— ファーシッド
ソース
3
サーバーにデータを転送せずにJavaScriptで変換を行う別のツールを見つけました。jpillora.com / base64-encoderさらに、ドラッグアンドドロップで複数のファイルを処理します。ローカルで使用するためにページを保存します。
— ハンドル
1
imho、「静的html」ページを尊重し、ドキュメント内に完全に自己完結しているため、最良のソリューション。
— Buffalo Rabor 2016年
1
最良のソリューション。pngファイルでも動作します。<link href = "data：image / png; base64、YourBase64StringHere" rel = "icon" type = "image / png" />
— Rolf of Saxony
1
これにより、すべてのページに長い文字列が追加されます。ユーザーにほとんど送信されない小さな画像には、インラインbase64を使用します。
— frodeborli
このようにして、ファビコンがキャッシュされることはありません。毎回文字列全体をクライアントに送信します。IHMHOはURLを使用しているため、ブラウザーキャッシュは「よりクリーン/良い」と感じます
— Michiel
34

使用法構文：.ico、.gif、.png、.svg

この表はfavicon、主要ブラウザでのの使用方法を示しています。標準の実装では、ドキュメントのセクションでrel属性を持つlink要素を使用して、ファイル形式とファイル名および場所を指定します。

ほとんどのブラウザは、Webサイトのルートにあるfavicon.icoファイルを優先することに注意してください（したがって、アイコンリンクタグは無視されます）。

                                           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ビットの色深度で。

上記の情報は一般的に正しいですが、特定の状況ではいくつかのバリエーション/例外があります。

img ウィキペディアのソースにある記事全体を参照してください。

更新：（"詳細"）

  • 検索結果に表示するファビコンを定義するためのGoogleの「新しい」（2019）基準を参照してください。

  • 次のようなURLを持つ任意のドメインについて、Googleのキャッシュされたファビコンを（プログラムまたは手動で）取得できます。https://www.google.com/s2/favicons?domain=stackoverflow.com

    上記のURLを<img>タグで直接使用すると、「」が返されます。

  • realfavicongenerator.netを数回使用しました。最大限の互換性を得るために必要となる可能性のあるすべてのファビコンのバリエーションを生成/カスタマイズすることは非常に徹底しています。（あなたが探している場合は、単一ファビコン画像を、これは可能性があるではないあなたのためのツールとなる！）、単純なファイル変換のために（例えば、PNGにICO、など）私は次のようにonlineconvertfree.com。

— Ashleedawg
ソース
15

ファビコンがpngタイプの画像の場合、古いバージョンのChromeでは機能しません。ただし、FireFoxでは問題なく機能します。また、そのような作業をしている間は、ブラウザのキャッシュをクリアすることを忘れないでください。多くの場合、コードは問題ありませんが、キャッシュが本当の原因です。

— タンビーア・シェイク
ソース
1
それはいいです; とにかく古いバージョンのChromeをインストール/維持するのは非常に難しい
— Ben Leggiero
8 
<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"/>
— シロフク
ソース
7 
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
 <link rel="shortcut icon" type="image/ico" href="http://example.com/favicon.ico"/>

これは私のために働いた

— アナンド・ドウィヴェディ
ソース
4
それはあなたが使用している.ICO考慮不正確だから-これは働くかもしれないが、あなたは、MIMEタイプとしてPNG /画像を使用することはできません
— zanderwar
5

古い投稿は知っていますが、私のような人のために投稿しています。これは私のために働いた

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

ルートディレクトリにファビコンアイコンを配置します。

— サイクロトロン3x3
ソース
4

いつか誰かを助けるかもしれない追加のメモとして。

以前はページに何もエコーできません：

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

正常に動作します

— bart2puck
ソース
3
これは、HTMLドキュメントのヘッドセクションにあるはずであり、そうでない場合はほとんどのブラウザで無視されるためです。
— エリックセバスタ2015年
ええ、誰かが問題に遭遇した場合に備えて、これをここに置きたかっただけです。私の問題は、 "こんにちは"がデバッグコードであり、少し困惑していたことです。
— bart2puck 2015年
3

私が使用convert -resize 16x16 img.png favicon.ico私の画像を変換し、そして追加する（Linuxではkonsoleの上で）<link rel="icon" href="images/favicon.ico" type="image/png" sizes="16x16">私のヘッダ、すべての作業完璧に。

— dmx
ソース
2

あなたのサイトがIEとして実行されている場合subfolder：

http://localhost/MySite/

それを考慮する必要があります。ASP.NETアプリからそうする場合~は、URLの前にを追加するだけです。

<link rel="shortcut icon" type="image/x-icon" href="~/favicon.ico" />
— セルジュ・セーガン
ソース
2

OPの更新に従って、ローカルには表示されませんでしたが、OPの更新に従って、サーバーにアップロードしたら問題ありませんでした。

これはシンプルで静的なHTML Webサイトなので、ローカルWebサーバーを実行せずに作業できるという贅沢があります。
デフォルトでは、ウェブサーバーは通常、ファビコンがある場合は自動的にそれを提供します。

しかし、Webサーバーを実行していない場合、ブラウザー自体は、htmlドキュメントにリストされていない限り、追加のファイルを探してディレクトリを読み取るだけではありません（favicon.icoなど）。

したがって、headタグに次のアイテムが含まれている間： 

    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">

また、プレーンオールの参照も含めていませんfavicon.ico。
ただし、favicon.ico上記の画像に加えて、ファイルが含まれていました。

次の行を追加したら、 

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

それはまたなかった私が見たときに、私のブラウザに表示され、ローカルファイルをしても、いないローカルサーバを介してサービスを提供しています。

そのため、アイコンはライブサーバーで実行したときに正常に表示されましたが、ローカルでは表示されませんでした。

私が使用したファビコンジェネレーターは、コード、アイコン、マニフェスト、および指示を提供してくれたので、これについてはっきりと述べています。ただし、favicon.ico画像は含まれていました<link>が、htmlドキュメントに追加するコードにそのファイルへのが含まれていませんでした。デフォルトでは、
サービスの推定favicon.icoが自動的に提供され、すべてのブラウザーで使用されるため、「代替」バージョンのみを明示的にヘッドタグに追加する必要があると思います。
明らかに、彼らはローカルでファイルを表示しているとき（別名、ローカルで提供していない）、ファビコンを見ることに興味がないとは考えていません。

— シェリル・ホーマン
ソース
0

FFはの//ようにURLに冗長性があるアイコンのロードに失敗することに注意してください/img//favicon.png。FF 53でテスト。Chromeは問題ありません。

— エティエンヌベルサック
ソース
それがコメントであるのと同じくらい、それは実際には答えではありません。（「回答方法」を参照してください。）
— ashleedawg
-2

私はただpngを使いました。白い背景は必ず削除してください。より良いアイコンになります

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