My Web道

WEB制作科 受講記録 …とその後も続くWEB制作に関する活動・学習記録です。

favicon読み込み時のエラー 「Failed to load resource: the server responded with a status of 404」への対応

本日ほぼ完成したBootstrapサイトをBlisk(※)で検証していたところ、Errors Notifierでエラーを検出!
f:id:sntkk3:20180105221656p:plain

※Bliskについては、以下記事をご参照のこと
times-diary.hatenablog.com


さらに確認すると、以下のようなメッセージが。
f:id:sntkk3:20180105221748p:plain

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サイト 紹介 】

1. ファビコン作成 favicon.ico 無料で半透過マルチアイコンが作れます

https://ao-system.net/favicon/
f:id:sntkk3:20180105225053p:plain

3. JPEG/PNG/GIFからアイコンを作成する「アイコン コンバータ」

https://service.tree-web.net/icon_converter/
f:id:sntkk3:20180105225630p:plain

4. JFavicon & App Icon Generator

https://www.favicon-generator.org/
f:id:sntkk3:20180105225911p:plain

( favicon作成ツールはここまで)


手順 3. faviconをルートフォルダに配置 (アップロード)

手順 4. 再びBliskで確認

以上の手順を経て、Bliskに晴れてエラーが表示されなくなりました。

f:id:sntkk3:20180105224928p:plain


なお、今回のエラー解決策を調べていたところ、
以下の方法でfavicon画像を配置しないまま、エラーを回避できるという意見をいくつかのページで見かけました。

faviconエラー解消方法として推奨されていた方法 》
以下一行をhtmlファイルのヘッダに追加 ( favicon 画像は配置しない )

<link rel="shortcut icon" href="">

なので、念のため私もこの方法を試してみましたが、
当方環境ではこの方法ではエラーは解消できませんでした。


ということで、本日は favicon読み込みエラー時の対応方法についてお伝えしました。

以上、ご参考まで。