ファビコンが表示されない

Question

ネット上に掲載されているファビコン設定の説明に従っているつもりなのですが、どうしてもファビコンが表示されません。 HPの構成は以下で、「index.html」に「menu.htm」と「top.html」を呼び出しているフレーム形式のトップページです。　　/home 　　├index.html 　　├top.html 　　├menu.html 　　└imageフォルダ　　　 └favicon.ico 「index.html」だけでなく、念のため「menu.htm」と「top.html」にも内に下記タグを入れていますが、ファビコンが表示されません…。　　以下のことは試してみました。　　・ファビコンはico生成ソフトで作っています　　・インターネットオプションで、一時ファイル履歴を削除　　・ブラウザを再起動　　・ブックマークを削除し、お気に入りに追加を改めてしてみるこれだけしても、やはりファビコンが表示されないのです。一体何が悪いのでしょうか…？？　詳しい方、是非お助け下さい！

think49 · Accepted Answer

一つ一つ問題を切り分けてみてはどうでしょう？

1. ブラウザがfaviconを表示できる？
念のため、ローカルテストで。

---
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<html lang='ja' xml:lang='ja' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='content-type' content='text/html; charset=utf-8' />
<meta http-equiv='content-style-type' content='text/css' />
<meta http-equiv='content-script-type' content='text/javascript' />
<title>TEST</title>
<link href="http://okwave.jp/favicon.ico?20081110" rel="shortcut icon"/>
</head>
<body>
</body>
</html>
---

2. icoを相対パスにして表示できる？
http://okwave.jp/favicon.ico?20081110 を /home にダウンロードして、
<link href="favicon.ico" rel="shortcut icon" /> でローカルテスト。

3. favicon.ico のパスは正しい？
/image にOKWaveからDLした favicon を置いて、
<link href="image/favicon.ico" rel="shortcut icon" /> でローカルテスト。

4. 自作の favicon.ico は問題ない？
favicon.ico を自作のアイコンに取り替えて、ローカルテスト。

5. サーバの設定に問題はない？
index.html と favicon.ico をサーバにUPしてテスト。

私の環境では、4. まではパスしました。(サーバテストはやっていません)
HTMLは上で示したように可能な限り、簡易的なものにしてみてください。
少しずつ今のHTMLにしていけば「どこで躓くか」わかりますから、そこで問題を切り分ければいいと思います。

think49 · Answer

#4の方の回答を見て気が付いたことを。

> http://shimax.cocolog-nifty.com/search/2007/07/faviconie7_4243.html
ブラウザ依存だとは気が付きませんでした。
これでテストして気が付いたのですが、ローカルテストは

file:// … IE7でNG、FxでOK
http://127.0.0.1/ … IE7,FxでOK

なんですね。
htmlファイルをダブルクリックしていたら、IE7では表示されないようです。
ですので、お使いのPCでApacheなどのサーバプログラムを立ち上げていないようでしたら、ローカルテストは止めてサーバにUPしてテストしてみてください。

それにしても、テストが面倒な仕様ですねぇ…。

noname#100277 · Answer

http://shimax.cocolog-nifty.com/search/2007/07/faviconie7_4243.html
上記に回答が出てました（汗
コレで解決する筈。

think49 · Answer

#2です。補足を読みました。

> 「1.」で既にダメでした。これは一体どういう問題なのでしょうか？
すみません。HTMLに半角スペースが混在していたようです。

<link href="http://okwave.jp/favicon.ico?20081110"​ rel="shortcut icon"/>

この部分で http:// の前にスペースが入っているので、取り除いてみてください。
私の環境では、これでファビコンが表示されました。

noname#100277 · Answer

ローカルではどうでしょうか？
imageディレクトリでは無くhomeに直接置いた場合はどうですか？
<link rel="shortcut icon" type="image/x-icon" href="image/favicon.ico">
と記述した場合は如何でしょうか？

ファビコンが表示されない

一つ一つ問題を切り分けてみてはどうでしょう？

#4の方の回答を見て気が付いたことを。

この回答への補足

#2です。

この回答への補足

ローカルではどうでしょうか？

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング