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

Question

閲覧いただきありがとうございます。

タイトル通り、ファビコンが表示されず困っております。
chrom,IE両方表示される方法をご教示いただけますと幸いです。

よろしくお願いいたします。

    <link rel="icon" type="img/x-icon" href="./favicon.ico">
    <link rel="icon" type="img/vnd.microsoft.icon" href="./favicon.ico">
    <link rel="icon" href="./favicon.ico">

ファビコンはindex.htmlと同じ階層にfavicon.icoというファイル名で入れています。

サイズ:48×48
使用サーバー:お名前ドットコム

●試したこと
キャッシュ/cookie削除して再読み込み→解決せず

●追記
chromの方はcom+shift+Rで読み込みしたら直りました。
IEは以前表示されません。

そこでコードを変更し、以下のような形にしました。

<link rel="icon" type="image/x-icon" href="./favicon.ico">
<link rel="icon" type="image/vnd.microsoft.icon" href="./favicon.ico">
<link rel="icon" href="./favicon.ico">
<link rel="apple-touch-icon" href="./apple-touch-icon.png" sizes="180x180">

用意したのは180×180のpngデータとicoデータです。

icoデータはこちらのサイトにて、16×16と32×32のpngでマルチアイコンを作成しました。
https://ao-system.net/multiicon/

以前IEは表示されず、、、
間違いなどがあればご指摘ください。

よろしくお願いいたします。

Comments

[kei344]

「favicon.ico」はどのようにして作成したのでしょうか。

[eneko0513]

Chromeの検証ツールでネットワークタブを見た時にfavicon.icoは404エラーとかになっていますか？

[HiroK59]

ご質問ありがとうございます。
>kei344さま
データはクライエントからいただいたので制作方法は不明したので先ほど質問しました。

>eneko0513
エラーはでておりませんでした。

Answer 1

開発時、キャッシュなどでよく反映されなくて困りますよね。

まだサイトにアクセスしたことない端末から確認したりしてみることをよくしています。
スマホでもchromeならタブ一覧の際にfavicon表示ありますので。

Comments

[HiroK59]

コメントありがとうございます。
chromeは反映されていないだけでした。困りますよねー、、、
アドバイスありがとうございます！

Answer 2

とりあえず、Ctrl + Shift + Rをするか、
faviconファイルをブラウザで直接開いて数度リロードしてみてください。

これで、最新のになるはずです。

それでと反映されない場合はパスのミス等が濃厚です。

Comments

[HiroK59]

Ctrl + Shift + R
こちら試したところ、chromの表示が解決されました！ありがとうございます。
ただ、IEはいまだに表示されずです、、、

[kyoya0819]

IEは16*16が必要なはずです。

Answer 3

BASIC認証が原因でした。