2012-12-08 16 views
37

私は未発表のHTMLページを作っています。私がやりたかったことの1つは、タイトルの隣に表示するfaviconを追加することでした。私はGoogle Chromeを使用していますが、他のウェブサイトにはブラウザのタイルの隣に表示されるファビコンがありますが、表示しようとしているものは表示されません。私のデスクトップ上のフォルダ内のサイトはsiteという名前です。これはコードです:HTMLのfaviconがGoogleのchromeに表示されません

<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 
     <link rel="shortcut icon" href="/favicon.ico" /> 
    </head> 
    <body> 
    </body> 
</html> 
+0

はファビコン画像正しいサイズ(×16 16)ですか? – Blake

+0

私はそれを作るためにオンライン発電機を使いました。 – Nick

答えて

23

あなたはHREFの大手/を持っているので、あなたは、ルートフォルダになりますファイルを参照しています。あなたのコンピュータ上のフォルダにあなたのページがあり、ローカルWebサーバからそれを提供していない場合は、先頭の/があなたのファイルシステムのルートフォルダを探すようにブラウザに指示します。したがって、ブラウザでは、ファイルがC:/favicon.icoまたはこれに類似すると予想されます。これはおそらくあなたが期待したものではありません。

ウェブページと同じフォルダにfavicon.icoがある場合は、先頭のスラッシュを削除するだけでアイコンが表示されるはずです。

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

更新:デバッグオプションとして

、あなたはあなたの作品を知っているのタグを追加しようとすることができます。私はStackOverflowソースからこのスニペットを借りました。リンクタグをこれに置き換え、あなたのfaviconとしてSOロゴが表示されているかどうかを確認してください。

<link rel="shortcut icon" 
     href="http://cdn.sstatic.net/stackoverflow/img/favicon.ico"> 

アップデート2:

これは、ファイルがWebサーバを介して提供されることなく、ローカルにロードされた場合にファビコンが表示されていないクロムをa bug reportedがあることが表示されます。

+0

これも機能しません。 – Nick

+2

@ニック開発ツールを開く(F12キーを押す)場合は、[ネットワーク]タブに移動し、ページをリロードします。すべてのリソースがロードされます。あなたがfavicon.icoを探すなら、それはステータス欄で何を言いますか?あなたは200,404か何かを得ますか? –

+0

それは私のサイト名とその下のローカルリンクです。すべての列が表示されますが、ページ自体のステータスはすべて表示されます。 – Nick

-1

あなたのhtmlは、初心者にとっては間違いです。あなたの頭部セクション内にdivがあってはいけません。私は

+2

私の答えが間違っている理由についてダウン投票者がコメントしてくれればいいですか? –

+4

有効な点ですが、これは彼の質問に答えません。 – MikeSmithDev

+0

私は頭のタグのdivを持っていませんでした。しかし、あなたは正しいです、私はDivの事にもまったく新しいです。 – Nick

2

クロムを使用すると、アドレスバーにファビコンを表示することができますようにそれは見ていない...

http://en.wikipedia.org/wiki/Favicon#Use_of_favicon

私をあなたが最初などファビコンで作業を開始する前に、正しいHTMLに見てくださいこのようにして見たこともあります。違いがあるかどうかわからない。

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

Chromeはアドレスバーにfaviconを表示しませんが、タイトルの横のタブに表示します。私が信じているのは、彼が他のページのために見ることができるとOPが求めていることです。 –

+1

ええ、私はタブ内のfaviconを探していた。 – Nick

+0

おっと、私の悪い、少し早くそれを読んでください。あなたが100%確信しているなら、あなたが持っているイメージは正しく参照されているはずです。... faviconを指定するコードが複数行ありますか?私は疑問に示したように – Blake

0

このトリックは動作します:例

var link = document.createElement('link'); 
    link.type = 'image/x-icon'; 
    link.rel = 'shortcut icon'; 
    link.href = '/favicon.png'; 

とキャッシュされるためにヘッダーまたはマスターページにこのスクリプトを追加します。最適ではありませんが、機能します。

+1

ことを試してみました、ではない'画像/ X-アイコンをクリックします。これが動作している場合は、サーバー(またはブラウザー)がこれをオーバーライドしているためです。ただし、HTMLでハードコードされているのではなく、JavaScriptでこれを設定することはお勧めできません。 – DocRoot

0

パスはURI(フル)を使用する必要があります。

のように:あなたのケースで非常にhttp://example.com/favicon.png

<!DOCTYPE html> 
<html> 
    <head profile="http://www.w3.org/2005/10/profile"> 
     <title></title> 
     <link rel="shortcut icon" 
       type="image/png" 
       href=" http://example.com/favicon.png" /> 
    </head> 
    <body> 
    </body> 
</html> 

参考: http://www.w3.org/2005/10/howto-favicon

2

1)あなたのchacheをクリアします。http://support.google.com/chrome/bin/answer.py?hl=en&answer=95582別のブラウザをテストして、サファリと言うことができます。どのようにfaviconをインポートしましたか?

2)あなたはそれを追加する必要があります方法:

ノーマルファビコン:

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

PNG/GIFのファビコン:もう一つが問題になる可能性がある

<link rel="icon" type="image/gif" href="favicon.gif" /> 
<link rel="icon" type="image/png" href="favicon.png" /> 

3)クロムができること'0 tディスプレイ favicons、ローカルの場合(ウェブサーバーにアップロードされていません)。

4)favicon.{whatever}から{yourfaviconname}.{whatever}に名前を変更してください。ただし、通常のファビコンを使用することをお勧めします。これは私の問題をIEで解決しました。

5)これは素晴らしい動作する別の解決策が見つかりました!

<link href="data:image/x-icon;base64,AAABAAIAEBAAAAEAIABoBAAAJgAAACAgAAABACAAqBAAAI4EAAAoAAAAEAAAACAAAAABACAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAA////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AIaDgv+Gg4L/hoOC/4aDgv+Gg4L/hoOC/4aDgv+Gg4L/hoOC/4aDgv////8A////AP///wD///8A////AP///wCGg4L/////AP///wD///8A////AP///wD///8A////AP///wCGg4L/////AP///wD///8A////AP///wD///8AhoOC/////wCGg4L/hoOC/4aDgv+Gg4L/hoOC/4aDgv////8AhoOC/////wD///8A////AP///wD///8A////AIaDgv////8A////AP///wD///8A////AP///wD///8A////AIaDgv////8A////AP///wD///8A////AP///wCGg4L/////AHCMqP9wjKj/cIyo/3CMqP9wjKj/cIyo/////wCGg4L/////AP///wD///8A////AP///wD///8AhoOC/////wBTlsIAU5bCAFOWwgBTlsIAU5bCM1OWwnP///8AhoOC/////wD///8A////AP///wD///8A////AP///wD///8AU5bCBlOWwndTlsLHU5bC+FOWwv1TlsLR////AP///wD///8A////AP///wD///8A////AP///wD///8A////AFOWwvtTlsLuU5bCu1OWwlc2k9cANpPXqjaT19H///8A////AP///wD///8A////AP///wD///8A////AP///wBTlsIGNpPXADaT1wA2k9dINpPX8TaT1+40ktpDH4r2tB+K9hL///8A////AP///wD///8A////AP///wD///8A////ADaT1wY2k9e7NpPX/TaT16AfivYGH4r23R+K9u4tg/WQLoL1mP///wD///8A////AP///wD///8A////AP///wA2k9fuNpPX5zaT1zMfivYGH4r23R+K9uwjiPYXLoL1+S6C9W7///8A////AP///wD///8A////AP///wD///8ANpPXLjaT1wAfivYGH4r22x+K9usfivYSLoL1oC6C9esugvUA////AP///wD///8A////AP///wD///8A////AP///wD///8AH4r2zx+K9usfivYSLoL1DC6C9fwugvVXLoL1AP///wD///8A////AP///wD///8A////AP///wD///8A////AB+K9kgfivYMH4r2AC6C9bEugvXhLoL1AC6C9QD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAugvXyLoL1SC6C9QAugvUA////AP//AADgBwAA7/cAAOgXAADv9wAA6BcAAO+XAAD4HwAA+E8AAPsDAAD8AQAA/AEAAP0DAAD/AwAA/ycAAP/nAAAoAAAAIAAAAEAAAAABACAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAA////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AhISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/////wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wCEhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AISEhP+EhIT/////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AhISE/4SEhP////8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AhISE/4SEhP////8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wCEhIT/hISE/////wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wCEhIT/hISE/////wD///8AhISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP8AAAAA////AISEhP+EhIT/////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AISEhP+EhIT/////AP///wCEhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/wAAAAD///8AhISE/4SEhP////8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AhISE/4SEhP/4+vsA4ujuAOLo7gDi6O4A4ujuAN3k6wDZ4OgA2eDoANng6ADZ4OgA2eDoANng6ADW3uYAJS84APj6+wCEhIT/hISE/////wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wCEhIT/hISE/9Xd5QBwjKgAcIyoRnCMqGRwjKhxcIyogHCMqI9wjKidcIyoq3CMqLlwjKjHcIyo1HCMqLhogpwA/f7+AISEhP+EhIT/////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AISEhP+EhIT/xtHcAHCMqABwjKjAcIyo/3CMqP9wjKj/cIyo/3CMqP9wjKj/cIyo/3CMqP9wjKj/cIyo4EdZawD///8AhISE/4SEhP////8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AhISE/4SEhP+2xNMAcIyoAHCMqJhwjKjPcIyowHCMqLFwjKijcoymlXSMpIh0jKR6co2mbG+OqGFqj61zXZO4AeXv9gCEhIT/hISE/////wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wCEhIT/hISE/6i5ygDF0dwAIiozACQyPQAoP1AALlBmADhlggBblLkGVJbBPFOWwnxTlsK5U5bC9FOWwv9TlsIp3erzAISEhP+EhIT/////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAAAAAAALztHAAAAAAAuU2sAU5bCClOWwkNTlsKAU5bCwFOWwvhTlsL/U5bC/1OWwv9TlsL/U5bC/ViVvVcXOFAAAAAAAAAAAAD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AAAAAAAAAAAALDhEALVFoAFOWwjpTlsL6U5bC/1OWwv9TlsL/U5bC/1OWwvxTlsLIV5W+i2CRs0xHi71TKYzUnyuM0gIJHi4AAAAAAAAAAAAAAAAA////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAAAAAAAAAAACtNZABTlsIAU5bCD1OWwv1TlsL6U5bCxFOWwoRVlsBHZJKwDCNObAA8icJAKYzUwimM1P8pjNT/KYzUWCaCxgALLUsAAAAAAAAAAAD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAApS2EAU5bCAFOWwgBTlsIAU5bCNVOWwgg+cJEAIT1QABU/XQA1isg4KYzUuymM1P8pjNT/KYzU/ymM1LAti9E0JYvmDhdouAAAAAAAAAAAAP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AFyk1AE+PuQBTlsIAU5bCAER7nwAmRVoADBojABRFaQAwi80xKYzUsymM1P8pjNT/KYzU/ymM1LgsjNE2MovXFB+K9MUfivbBH4r2BgcdNAARQH8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAAAAAAAQIDABIgKgAPGiIABRMcABdQeQAti9AqKYzUrCmM1P8pjNT/KYzU/ymM1MAqjNM9HmqmACWK7SIfivbZH4r2/x+K9vsuiudAFE2YACB69AD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAAAAAAABhQfABtejgAoitEAKYzUACmM1JQpjNT/KYzU/ymM1MgpjNREH2mgABlosQAfivY0H4r26R+K9v8fivbyKIrtR0CB1SggevTQIHr0Nv///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AAAAAAAAAAAACBwsAJX2+ACmM1AApjNQAKYzUGSmM1MYpjNRMInWxABNHdQAcfuEAH4r2Sx+K9vUfivb/H4r25iGK9DE2gt4EIHr0yyB69P8gevTQ////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAAAAAAAAAAAAAAAAAOMUsAKYzUACmM1AApjNQAJX6/ABE7WgAUWJwAH4r2AB+K9mYfivb9H4r2/x+K9tYfivYfG27RACB69HsgevT/IHr0+yB69DL///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAAAAAAAAAAAAAAAAAAfaJ4AJ4XKABVGagAKKkoAG3raAB+K9gEfivaEH4r2/x+K9v8fivbCH4r2EB133wAgevQsIHr0+SB69P8gevSAIHr0AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AAAAAAAAAAAAAAAAAAAAAAAUSGwAFERwAElCOAB+J9QAfivYAH4r2lx+K9v8fivb/H4r2qR+K9gYefuoAIHr0BSB69M4gevT/IHr00CB69AUgevQA////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAkqSgAfivYAH4r2AB+K9gAfivZLH4r2/R+K9osfivYBH4PwACB69AAgevSAIHr0/yB69PkgevQwIHr0ACB69AD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAAAAAAAAAAAAAAAAAAAAAAAEEiAAB+K9gAfivYAH4r2AB+K9gAfivYsH4r2AB+G8wAge/QAIHr0MCB69PsgevT/IHr0eyB69AAgevQAIHr0AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAXZrYAH4r2AB+K9gAfivYAH4r2AB+K9gAfifUAIHz0ACB69AcgevTQIHr0/yB69MwgevQEIHr0ACB69AAgevQA////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAAAAAAAAAAAAAAAAAAAAAAAAIDAB6E6gAfivYAH4r2AB+K9gAfivYAH4r2ACB+9QAgevQAIHr0fCB69P8gevT5IHr0LCB69AAgevQAIHr0ACB69AD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAAAAAAAAAAAAAAAAAABBAcAEUqDAB6E6wAfivYAH4r2AB+K9gAggPUAIHr0ACB69AAgevQTIHr0qCB69HYgevQAIHr0ACB69AAgevQAIHr0AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP////////////////wAAH/8AAB//P/+f/z//n/8wAZ//MAGf/z//n/8wAZ//MAGf/zAAn/8/gJ//+AD///AAf//wEH//+cA///8AH//8BB///BgH//xwB///4If//4EP//+CD///hh///9w////4P///+H////j////////////" rel="icon" type="image/x-icon" /> 

このため、ここで、このページを使用します::私は単に直接このようなタグ内にBase64でエンコードされたイメージとしての私のファビコンを追加http://www.motobit.com/util/base64-decoder-encoder.asp

11

予想キャッシュされたときにファビコンが表示されません共通の課題、例えば、あなたの.htaccess読み取り場合: ExpiresByType image/x-icon "access plus 1 month"

そして、単にあなたのファビコンリファレンスにランダムな値を追加します。 <link rel="shortcut icon" href="https://mysire.com/favicon.ico?r=31241" type="image/x-icon" />

大量のキャッシュがあっても私のために毎回動作します。

+1

この解決法は私のためにそれを打ちました。どうも。 – zipzit

+0

これ!私は試してみるまで懐疑的だった。 –

+0

Heh。 Chromeは私のfaviconを読み込もうとしませんでした(404、devのコンソールでネットワーク要求なし)。その後、私は?v = 1とブームを付け加えました!完了しました。ありがとう! – REJH

10

Chromeがfaviconを表示しないもう1つの理由は、問題のサイトにfaviconがないか、faviconが正しく設定されていない時間がまだ覚えていることです。

は、あなたは完全にファビコンキャッシュをワイプしたいとしている:

  1. 終了し、実行中のすべてのクロームのプロセス。

  2. ユーザーデータフォルダのFaviconsファイルを削除します。例えば:それはFaviconsコンテナには影響を与えないよう

    C:\Users\me\AppData\Local\Google\Chrome\User Data\Default\Favicons 
    

これは、ブラウザのキャッシュをクリアすることによって解決することはできません。

はまたreadonlineあなたは、ファビコンリソースへの要求がは、デベロッパーツールの[ネットワーク]パネルに示されていないかもしれないものに反し、ということに注意してください。非常にまれな状況では、そのような要求の1つがに表示されることがありますが、DevToolsはあなたのfaviconの不具合を解決するのに役立つことはほとんどありません。

+0

はい。ありがとうございました!私は、それがfavicon.icoを要求していないことをフィドラー(プロキシー)を使用して見ることができましたが、このファイルを削除した後、それはしました。ありがとう! – Grezzo

6

私は、ファビコンの状態がブラウザの有効期間中キャッシュされているように見えるので、ファビコンが読み込まれていない場合はを再起動してからになります。開発ツールの「アプリケーション」タブには表示されず、ハード・リロードや「サイト・データの消去」によってクリアされないようです。

+0

ありがとう、リッチ!これは私のために働いた! –

0

この問題は私にナットを運転していました!例えば

<link rel="profile" href="http://gmpg.org/xfn/11"> 

:溶液がちょうどヘッダタグに以下を追加し、実際には非常に容易である

<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 
     <link rel="profile" href="http://gmpg.org/xfn/11"> 
     <link rel="icon" href="/favicon.ico" /> 
関連する問題