web-dev-qa-db-ja.com

静的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はすべてのブラウザタイプで動作する最高の画像フォーマットです。

更新

私はこれをローカルに動作させることはできませんでしたが、コードがチェックアウトすると、サーバーがサイトの提供を開始した後にのみ正しく動作するようになります。サーバーにプッシュしてキャッシュを更新するだけでうまくいきます。

523
TheLegend

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"/>
778
Hazy McGee

ほとんどのブラウザは、サイトのルートディレクトリからfavicon.icoを取得する必要はありません。しかし、彼らは常に新しいものにそれを更新するとは限りません。

しかし、私は通常あなたの例の2番目に行きます:

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

実際には、あなたのfaviconがすべてのブラウザで動作するようにするためには、正しいサイズとフォーマットで10枚以上の画像が必要です。

私はApp( faviconit.com )を作成したので、人々はこれらすべての画像と正しいタグを手で作成する必要はありません。

あなたがそれを好むことを願っています。

108
Eduardo Russo

以下は私のために働きます...

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

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

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

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

33
Farshid

W3.orgで推奨されているように 、これを実現するためにrel属性を使うことができます。

例:

<head>
<link rel="icon" 
      type="image/png" 
      href="http://example.com/myicon.png">
...
14
Rahul Desai

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

14
Tanveer Shaikh

使用法の構文: .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×1632×3248×48、または64×64ピクセルです。色深度で8ビット24ビット、または32ビット

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

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

10
ashleedawg
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
 <link rel="shortcut icon" type="image/ico" href="http://example.com/favicon.ico"/>

これは私のために働きました

7
Anand Dwivedi
<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
shilovk

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

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

faviconアイコンをルートディレクトリに置きます。

5
Cyclotron3x3

いつか誰かに役立つかもしれない追加のメモとして。

前にページに何もエコーすることはできません。

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

正常に動作します

4
bart2puck

私は自分のイメージを変換するのにconvert -resize 16x16 img.png favicon.ico(linux konsole上)を使い、そして私のヘッダに<link rel="icon" href="images/favicon.ico" type="image/png" sizes="16x16">を加えるとすべてが完璧に動作します。

3
dmx

Favicon.icoブラウザという名前でfaviconをroot/imagesフォルダに追加すると、自動的にそれが理解され、favicon.Iとして取得されます。あなたのリンクはwww.website.com/images/favicon.icoでなければなりません

詳細については、この答えを見てください。

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

1
Sarkhan

あなたのサイトがsubfolderとして実行されている場合は、次の点に注意してください。

http://localhost/MySite/

あなたはそれを考慮に入れる必要があるでしょう。あなたがASP.NETappからそうしているならば、あなたがする必要があるのはURLの前に~を加えることだけです:

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

<link rel="icon" type="image/ico" href="images/favi.ico"/>を使ってみる

0
subindas pm

FFは、//のように冗長な/img//favicon.pngを含むアイコンをURLにロードできないことに注意してください。 FF 53でテスト済み。ChromeはOKです。

0
Étienne Bersac