Sinatraを使ってアプリを作成していたら
“GET http://localhost:4567/favicon.ico 500 (Internal Server Error)”
というエラーがでてしまってプログラムがしっかり動かなくなってしまいました。
そこで色々調べてみて、解決策がわかったのでまとめておきます。
最初に解決策をいうと、headに以下のコードを追加することです。
<link rel="icon" href="data:,">上記のコードを追加することでエラーは解決しました。
ですが注意点もあります。
その注意点についても下記にまとめてありますので、確認してもらえるとありがたいです。
この記事では解決策とfaviconについて解説していきます。
ご興味があるかたはご笑覧ください！
faviconとは
そもそもfaviconってなに？という感じですよね。
faviconの定義は以下のとおりです。
webサイトやwebページに関連づけられたアイコンです。ブラウザのブックマークやアドレス欄に表示します。
webを支える技術-HTTP,URI,HTMLそしてREST-
文字だけだとわかりにくいと思いますので、具体例を用意しました。
以下はGoogleChromeでwebサイト開いたページです。
“タブにあるサイト名の横”と”ブックマークバー”にあるアイコンがfaviconです。
favicon.ico 500 (Internal Server Error)：favicon.icoリクエストを防ぐための具体策
500(Internal Server Error)ってなんだっけ
まずは500(Internal Server Error)の確認です。
定義は以下のようになります↓
500 Internal Server Errorは、サーバー側に何らかの異常が生じていて、正しいレスポンスが返せないことを示します。
500 Internal Server Errorは、ほかに適切なサーバーエラーを示すステータスコードがない場合にも用います。
Webを支える技術-HTTP,URI,HTMLそしてREST-
favicon.ico 500 (Internal Server Error)の原因
じゃあ”favicon.ico 500 (Internal Server Error)”ってどういうこと？って思いますよね。
僕はlocalhostに接続していたので、”サーバー側に問題があった”とは考えられません。
そうなるとHTTPリクエストに問題があると考えるのが自然かなと思います。
僕が作成したSinatraアプリでは当初、Font Awesomeを使っていました。
そのためHTTPでGETメソッドまたはPOSTメソッドが実行されたときにfaviconの情報が要求されていたと思います。
でもHTMLには<icon>要素を作成していなかったので、”faviconのデータがないよ”という状態になったんじゃないかな〜と思ってます。
favicon.icoリクエストを防ぐための具体策
最初にも書きましたがHTMLの<head>内に<link rel="icon" href="data:,">を入力することで、”favicon.ico 500 (Internal Server Error)”を解決しました。
<link rel="icon" href="data:,">を書くことでfaviconを読み込ませられるようになります。
今回はfaviconを使っていなかったので、hrefには何も入力してません。
こうすることによってfaviconの情報を読み取れるため、エラーが解決するんだと思います。
ただし注意点があります。
“この方法では根本的な解決にはなっていないんじゃないか？”ということです。
いまの僕では根本的な解決策は思い浮かびません。
とりあえずの対処療法として考えてもらえたらと思います。
