本日ほぼ完成したBootstrapサイトをBlisk(※)で検証していたところ、Errors Notifierでエラーを検出!
※Bliskについては、以下記事をご参照のこと
times-diary.hatenablog.com
さらに確認すると、以下のようなメッセージが。
Failed to load resource: the server responded with a status of 404 (Not Found) favicon.ico:0
どうも、faviconの読み込みでエラーになっている様子。
(つまり、htmlファイル側で読み込もうとしている対象のfavicon画像が存在していないためにエラーになっている模様。)
たしかに。
そういえば、サイトにfaviconの画像を配置していなかったことに気づきました。
ということで、以下今回行なったfaviconエラー対応です。
favicon読み込みエラー時の対応
【手順】
手順 1. htmlファイルのヘッダに以下コード一行を追記
<link rel="shortcut icon" href="favicon.ico">
手順 2. favicon画像を作成し、設置
2.1. favicon画像作成
favicon画像の作成にあたっては、便利なオンラインツールがいくつもありましたので、ご紹介しておきます。
(今回私も以下 1.のツールを利用してfavicon画像を作成させていただきました。)
【 favicon作成に便利な4サイト 紹介 】
4. JFavicon & App Icon Generator
https://www.favicon-generator.org/
( favicon作成ツールはここまで)
手順 3. faviconをルートフォルダに配置 (アップロード)
手順 4. 再びBliskで確認
以上の手順を経て、Bliskに晴れてエラーが表示されなくなりました。
なお、今回のエラー解決策を調べていたところ、
以下の方法でfavicon画像を配置しないまま、エラーを回避できるという意見をいくつかのページで見かけました。
《 faviconエラー解消方法として推奨されていた方法 》
以下一行をhtmlファイルのヘッダに追加 ( favicon 画像は配置しない )
<link rel="shortcut icon" href="">
なので、念のため私もこの方法を試してみましたが、
当方環境ではこの方法ではエラーは解消できませんでした。
ということで、本日は favicon読み込みエラー時の対応方法についてお伝えしました。
以上、ご参考まで。