faviconが表示されない時に確認する5つのこと

はじめに

faviconを表示させたいことがあったのですが、ブラウザごとの挙動の違いによって以外と苦しめられました。この記事ではタイトルの通り、faviconが表示されない時に確認することを記載します。

faviconとはwebサイトのアドレスバーやタブ部分に表示されるアイコンのことです。付けておくことで複数タブを開いた際やブックマークした際に探しやすくなります。

基本的にfavicon用の画像を用意し、下記のように書いてあげるとfaviconは表示されます。

<link rel="shortcut icon" type="image/x-icon" href="/img/favicon.ico" />

参考：

画像ファイルが悪い場合、表示されないことがあるようです。また、調べたところ、faviconにはpngやjpgなども使えるようですが、icoファイルが一般的なようです。

画像が悪いのかそれ以外の原因かを切り分けるには、以下の手順が手っ取り早いと思います。

faviconの画像を変えたのに変更が反映されない場合はまず疑うと良いと思います。また、見落とすと中々気づけないのがこのパターンです。

IE、Edgeでは絶対パスでないとfaviconが表示されないようです。他のブラウザで表示されるにも関わらず、IEやEdgeで表示されないときはパスや確認4の証明書まわりを疑うと良いと思います。

https通信をしているサイトでは絶対パスをhttps://...と書いても証明書の問題で表示されないことがあります。オレオレ証明書を利用していると表示されないようなので注意が必要です。

一応、IE、Edgeのみに表示させたい場合は、画像のパスのみhttp://とSSL通信でなくしてあげれば表示させることはできました。ただし、この書き方（httpsのサイトで画像のパスのみhttpにする）をした場合Chromeではfaviconが表示されなくなりました。

ブラウザごとに格納しているfaviconに関するファイルをクリアしてみる方法です（私が試したときにはこれが原因になることはなかったため、感覚としてはあまり頻発しないパターンだと思います）。

ブラウザごとに格納されているfaviconファイルは、お気に入りなどを表示する際に利用されるものです。そのため、ブラウザからキャッシュを消してもこのファイルは消えません。

下記にGoogle Chromeでの格納場所を例として挙げておきます。

今回はfaviconが表示されない時に確認することを紹介しました。画像を用意して、HTMLを1行書くだけ…と思っていましたが~~ややこしい~~奥が深いなと感じました。ブラウザやそのバージョンによって苦しめられるということはよくあると思うのでfaviconで困っている方の一助になっていれば幸いです。

エンジニア中途採用サイト
ラクスでは、エンジニア・デザイナーの中途採用を積極的に行っております！
ご興味ありましたら是非ご確認をお願いします。

https://career-recruit.rakus.co.jp/career_engineer/
カジュアル面談お申込みフォーム
どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。
以下フォームよりお申込みください。
rakus.hubspotpagebuilder.com
ラクスDevelopers登録フォーム

https://career-recruit.rakus.co.jp/career_engineer/form_rakusdev/
イベント情報
会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！