ディレクトリ構造としては以下になります。

同じコードをそれぞれで使用しており、同じディレクトリにファビコンも配置しております。

自身で試して確認している中でおかしな点があり、試しにファビコンが正常に表示されるportfolio.htmlとphoto.htmlにて
以下表示させているコード部を消してみたのですがなぜかファビコンが表示されます。
（何かキャッシュが残っているのか原因はわかりませんが・・）

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

以前にファイルがごちゃごちゃになったので整理のためコピペでファイルを移したことがあり
それが原因でコピー元のファイルを参照してしまっているのかと疑い、
HTML内の適用な箇所のコードを変更等してみましたがきちんと反映されます。

原因分からず困っております・・

分かる方いらっしゃいましたらお力添えを頂きたいです。

宜しくお願い致します。

#ファビコンが表示されるもの
####portfolio.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    
    ~ 省略 ~

    <title>PORTFOLIO</title>
    <link rel="icon" href="favicon.ico">
  </head>

####photo.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    ~ 省略 ~

    <title>PHOTO</title>
    <link rel="icon" href="favicon.ico">
</head>

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

####selfpr.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    ~ 省略 ~

    <title>SELFPR</title>
    <link rel="icon" href="favicon.ico">
</head>

####works.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    ~ 省略 ~

  <title>WORKS</title>
  <link rel="icon" href="favicon.ico">
</head>

#追記

####ファビコンが表示されているページ

####ファビコンが読み込まれていないページ

行動規範の内容に同意します

回答1件

ベストアンサー

特にファイルの構成とfaviconの記述に問題はないように見えますね。
一度、ブラウザのキャッシュを消して試してみてはどうでしょうか？？

結果

htmlの構文くずれが原因。もろもろのやりとりはスレッド。

投稿2021/06/13 21:59

編集2021/06/18 19:11

runnynose

総合スコア497

TMTN

2021/06/13 22:09

ご回答ありがとうございます。そちらにつきましても記述するのは忘れておりましたが、 chromeの設定よりキャッシュされた画像とファイルの削除は致しました。それでも改善がされずでして・・

runnynose

2021/06/14 02:14 編集

> にファビコンが正常に表示されるportfolio.htmlとphoto.htmlにて >以下表示させているコード部を消してみたのですがなぜかファビコンが表示されます。ちなみにこれに関しては、faviconは読み込み記述がなくても、デフォルトはドキュメントルート直下にあるfaviconを取得するようになっています。

TMTN

2021/06/14 08:41

runnynose様そうなのですね。それは知りませんでした。ではおかしな挙動かと思っておりましたが記述なくても読み込んだのは正しい挙動なのですね。

TMTN

2021/06/14 15:47

Ctrl + Shift + Rをしたり、faviconファイルをブラウザで直接開いて数度リロードしたり、キャッシュを削除してみたり、とやはり試してみましたが解決いたしませんでした・・

runnynose

2021/06/15 14:16

どうもfaviconは通常のブラウザキャッシュとは別の場所にあるみたいで、保持されているfavicon用のキャッシュを手動で消す必要がありそうです。参考：https://qiita.com/chocodoughnut/items/691a4a768124028bedb5 いくつか質問させてください。 1. html確認するときはローカルなり、サーバー環境での確認ですか？ 2. 複数のブラウザで試していますか？

TMTN

2021/06/15 15:17

お返事ありがとうございます。記事を参考にして/Users/ユーザー名/Library/Application Support/Google/Chrome/まで移動しましたがDefaultというフォルダが見当たらず、またFaviconsというファイルもフォルダ内検索かけても見当たらなかったです・・質問に関しては ⑴ブラウザ表示で調べたり、GitHub PagesでURLを取得し確認しております。 ⑵ChromeとIEのみになります。

runnynose

2021/06/16 13:56

>⑵ChromeとIEのみになります。 IE、Chromeとも同じ結果になりますか？デベロッパーツールのnetworkタブの結果とかも気になりますね。

TMTN

2021/06/16 14:36

IEとChromeともに同じ結果になります。追記１としてスクショを２枚追加させて頂きました。ファビコンが現在表示されている方とファビコンが表示されない方のnetworkタブの結果を掲載させて頂きました。 networkで見てみるとファビコンが表示されない方は表示されていないのでfaviconという項目すらないのは分かるのですが、ファビコンが現在表示されている方で何故か「this request has no response data available」レスポンスが表示されないと出てきます・・

TMTN

2021/06/17 08:23

再度IEにて表示を確認したところchromeで表示されるページ含め全てファビコンが表示されませんでした・・

runnynose

2021/06/17 12:30

???? ぜひ解決したい。。。何ならビデ通したい笑ちなみにGitHub PagesなどにBasic認証かかってたりしないですか？何かしらのアクセス制限があれば、その可能性もあるのですが。ただ、表示するHTMLと同じドメインなはずなので、可能性は低いです。。。あとは、HTMLをサーバーでなくブラウザでそのまま表示した時の挙動も気になります???? (file://から始まるやつ) その結果としても出るもの出ないものに別れるのであれば、HTMLが壊れてないか構文チェックしてみた方がいいかもでですね。 https://validator.w3.org/#validate_by_input

TMTN

2021/06/18 15:26

お返事遅くなり申し訳御座いません・・ https://validator.w3.org/#validate_by_input にてHTMLが壊れてないか構文チェックしてみた結果エラーが出ている箇所が数点見つかりそちらを直したらなんと事象が解消されファビコンが正常に全てのページで表示されました・・解消できるまでいろんな手段を検討頂きご教示頂き本当に有難う御座いました・・

runnynose

2021/06/18 19:08

そうだったのですね！良かったです????????????

TMTN

2021/06/19 00:23

本当に助かりました・・エラーがJSとかとは違ってコンソールで確認出来ないのでまさか構文に問題があるとは思わなかったです。https://validator.w3.org/#validate_by_input といった便利な構文チェックするものもあること今回知れてよかったです。改めてですが、本当にありがとうございました。

runnynose

2021/06/19 07:50

vscodeとかのプラグインでw3c validatorというのがあり、同じチェックができるので、ぜひ入れてみてください^^

TMTN

2021/06/19 08:25

そのようなプラグインがあるのですね！是非いれてみます！ありがとうございます！

行動規範の内容に同意します