Q&A
1. ブラウザーのキャッシュをクリアしてもファビコン画像が表示されますか
2. ブラウザーのURL欄に https://test.●●●●/images/favicon.ico をいれてアクセスするとどうなりますか
実現したいこと
ファビコンの画像が表示されているのに、なぜか表示される検証ツールのエラーを解消したい。
発生している問題・分からないこと
htmlの<head>内に、↓を記述
<link rel="icon" href="images/favicon.ico">ローカルでは、ファビコン画像が表示され、エラー表示は無し
しかし、FileZillaでサーバーにアップロードしたあと、ネット上にあがった後に、検証ツールをみると、下記のエラーが表示される。しかも、ファビコン画像も表示されている。
ローカルでも、ネット上でもだファビコン画像は表示されているのに、なぜエラーがでてしまうのでしょうか？エラーがある状態では、納品できなくて困っています。
エラーメッセージ
error
1feature_collector.js:23 2GET https://test.●●●●/images/favicon.ico 404 (Not Found) 3 4※●●●●の部分は、サブディレクトリ名
該当のソースコード
feature_collector.js:23
1 e.prototype.error = function(e) { 2 console.error(e), 3 n.telemetryWrapper.send(n.telemetryWrapper.componentType.LOGGER, n.telemetryWrapper.actionType.ERROR, e) 4 }
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
URLの確認⇒問題なし
ブラウザキャッシュのクリア⇒済
ソースコードはfeature_collector.js:23 らしいのですが、どこから入ればいいのかもわかりません。
補足
特になし
feature_collector.jsはどのようなコードで、なんのために書いたのですか?
レスポンスありがとうございます。
1.はい。
2. https://test.●●●●/images/favicon.icoをいれてアクセスしてみる、という確認方法は、すでにためしています。「404 File Not Found アクセスしようとしたページは見つかりませんでした。」と表示されます。
ディレクトリを画像にしてみました（分かりづらくてすいません）。
このディレクトリ構成は間違っていないでしょうか？
赤＝●●●●（サブディレクトリ名）
黄＝自分の制作したサイトのフォルダ名を隠してる（今回は関係なし）
青＝自分の制作したサイトのフォルダ名（以下「mysite」とします)を隠してる
https://test.●●●●/images/favicon.icoをいれてアクセスしてみる、という確認方法ですが、
回答者様もネットで調べたときも、mysiteのフォルダ名が「https://test.●●●●/images/favicon.ico」の中に書かれていないので、自分のディレクトリ構成は正しいのか？という疑問があります。
https://test.●●●●/favicon.ico
で表示されない？
tmp様 ご回答ありがとうございます。
https://test.●●●●/favicon.ico
でも、表示されないですね。
環境とdir構成を書いてください。
環境と書きましたが
HTML5 を素 で書いたのか
Rails とか lalabel で書いたのか
winterboum様、ご回答・ご指導ありがとうございます。
HTML5 で書いています。
/yahoi.click/public_html/test/realestate/images/icon-ie.ico
yahoi.click/
│
├── public_html/
│ ├── test/
│ ├── realestate
│ ├── .vscode
│ ├── css
│ ├── images
│ ├── js
│ ├── scss
│ ├──index.html
│
以上です。
よろしくお願いいたします。
こういう情報は質問本文を編集してそちらに載せる方がベターです。
で、
/yahoi.click/public_html/test/realestate/images/icon-ie.ico という記述と
yahoi.click/
│
├── public_html/
│ ├── test/
│ ├── realestate
│ ├── .vscode
│ ├── css
│ ├── images
│ ├── js
│ ├── scss
│ ├──index.html
が一致しません。 階層の方では /yahoi.click/public_html/images/icon-ie.ico と読めます
│ ├ の間や | の前に 空白があるのだとするとコメントに書いたのではそれがわからなくなります。
該当のソースコード を載せたのと同じ様にして階層に読み違いが出ないように書き直して
あと、
エラーメッセージが出たときにどのURLをアクセスしたのか、を エラーメッセージの上に追記してください。
サブディレクトリの一致も確認したいので、まま 載せるか それができないなら 隠したところは全く同じであるということを確認してその旨も記述を
不備が多く、申し訳ありません。
・エラーメッセージが出たときにどのURLをアクセスしたのか
↓
アクセスしたURLとエラーメッセージです
-------------------------------------------------------
https://test.yahoi.click/realestate/
feature_collector.js:23
GET https://test.●●●●/images/favicon.ico 404 (Not Found)
-------------------------------------------------------
/yahoi.click/public_html/test/realestate/images/icon-ie.ico
・該当のソースコード を載せたのと同じ様にして階層に読み違いが出ないように書き直して
↓
書き直しました（コピペした時にズレてしまっていました）
├── public_html/
│ ├── test/
│ ├── realestate
│ ├── .vscode
│ ├── css
│ ├── images
│ ├── js
│ ├── scss
│ ├──index.html
ご確認お願い致します。
GET https://test.●●●●/images/favicon.ico 404 (Not Found)
は
GET https://test.yahoi.click/realestate/images/favicon.ico 404 (Not Found)
ですか？
GET https://test.●●●●/images/favicon.ico 404 (Not Found)
は、
GET https://test.yahoi.click/favicon.ico 404 (Not Found)
です。
feature_collector.jsに誤ったfaviconのurlを設定しているのではないですか？
回答1件
0
https://test.yahoi.click/realestate/ が /yahoi.click/public_html/test/realestate/index.html
であるなら そこからの 相対PATHで指定された
ink rel="icon" href="images/favicon.ico" は /yahoi.click/public_html/test/realestate/images/favicon.ico です
それは存在するのでファビコンが表示されています。
https://test.yahoi.click/favicon.ico がない！ と言われているのは ファビコン表示以外にどこかで favicon.ico を使ってるところがあるのでは？ それを探してみて。
投稿2024/09/05 13:33
総合スコア23653
favicon.icoを使っているところは、他にはありませんでした。
favicon デフォルトで検索すると
今どきのブラウザはデフォルトで勝手にfavicon.ico呼び出す
とか出てきます。これが影響しないですか？
tmp様、ご回答ありがとうございます。
「デフォルトで勝手にfavicon.ico呼び出す」というコメントから、思い出したことがあります。
最初にファビコンを設定していなかったし、head内に↓も記述していなかったのです。
<link rel="icon" href="images/favicon.ico">
デフォルトで勝手にfavicon.ico呼び出す」というのは、このように、書いてもない(要求していない）いないのに、ファビコン画像が見つからないよ！とブラウザが言ってくるということでしょうか？
もしそうだとしても、エラーが表示されたままでは納品はできません。
何かエラーを非表示にする方法ってないのでしょうか？
tmpさんのが ビンゴ の場合、かつ code や設定で直せなかった場合の
解決案１ /yahoi.click/public_html/test/realestate/images/favicon.ico を
/yahoi.click/public_html/test/favicon.ico に ln -s する。ん？ /yahoi.click/public_html/favicon.ico かな？
解決案２ <link rel="icon" href="images/favicon.ico"> を変える
１の方は default で読み込まれる ico がどう使われるのかわからないので不安
いずれにしても ink rel="icon" href=" を 相対パスで書くのが問題含みに思える。 Webサーバーの設定に書き込んだ root path からの 絶対パスで書くのが良いのでは。
にしても
localではエラーにならないというのは説明できないな、、、、
localでは apatchもnginxも通していない(ですよね？）ブラウザーにhtml fileを直読ませてる？
その辺りに違いが出る原因があるのかも
あぁ！
もしかして localでは realestate ディレクトリにcdしてません？
あなたの回答
tips
プレビュー
