favicon.icoの4xxエラーについて

CloudFront-S3で構築しているWEBベースのシステムで「/favicon.ico」の4xxエラーが発生しており原因と対処をまとめました。

faviconとは　ブラウザのタブに表示される画像

favicon(ファビコン)はサイトのタブに表示される画像のことです。これのことです。

CloudFront画面からエラー確認　4xxが発生している

たまたまCloudFrontの人気オブジェクトで発見しました。CloudFrontのログは出力設定をしておくとS3に出力されるのでそちらにも同様のログが出ています。

/直下にfavicon.icoは配置していないのになぜアクセスされているのか不思議です。ないものにはアクセスできないので4xxエラーが返却されます。（403でした。）

原因と対処　IEだと/直下のファビコンを見に行ってしまう

どうやらIE11(インターネットエクスプローラ)経由でアクセスする場合にのみ発生するようでした。このように古いブラウザーではファビコンは/favicon.icoに格納するお作法があったのでしょうか。
IE11では/直下のfavicon.icoを見に行っているようで、ここには置いていないのでファビコンは表示されませんでした。

原因の切り分けのためにファビコンを/favicon.icoにもコピーしておいたら4xxエラーは発生しなくなり、IEからもファビコンを確認できるようになりました。
IEでうまく動作しない場合や4xxエラーが邪魔な場合はこの対処法を試していただくとよいかと思います。

PR
当ブログはWordPressテーマSWELLを使用しています。非常に使いやすく、簡単にプロのようなデザインを使えるのでお勧めです！！

SWELL – シンプル美と機能性両立を両立させた、圧巻のWordPressテーマ