はじめに
faviconを表示させたいことがあったのですが、ブラウザごとの挙動の違いによって以外と苦しめられました。この記事ではタイトルの通り、faviconが表示されない時に確認することを記載します。
- はじめに
- faviconって何?
- 確認したブラウザとそのバージョン
- faviconの表示方法
- 確認1:読み込む画像ファイルを疑う
- 確認2:キャッシュを削除してみる
- 確認3:絶対パスで記述する(IE,Edge)
- 確認4:証明書まわりを疑う(IE,Edge)
- 確認5:faviconに関するファイルを削除してみる
- おわりに
faviconって何?
faviconとはwebサイトのアドレスバーやタブ部分に表示されるアイコンのことです。付けておくことで複数タブを開いた際やブックマークした際に探しやすくなります。
確認したブラウザとそのバージョン
- Google Chrome 75.0.37
- Firefox 67.0.4
- Internet Explore 11.88
- Edge 42.17
faviconの表示方法
基本的にfavicon用の画像を用意し、下記のように書いてあげるとfaviconは表示されます。
<link rel="shortcut icon" type="image/x-icon" href="/img/favicon.ico" />
参考:
確認1:読み込む画像ファイルを疑う
画像ファイルが悪い場合、表示されないことがあるようです。また、調べたところ、faviconにはpngやjpgなども使えるようですが、icoファイルが一般的なようです。
問題の切り分け
画像が悪いのかそれ以外の原因かを切り分けるには、以下の手順が手っ取り早いと思います。
- faviconが表示れる任意のサイトへアクセス
- 開発者ツールから
favicon
などで検索 - faviconの画像ファイルをダウンロード、自分のサイトでも表示されるか試す → 表示されるなら、自分のサイトの画像が問題であることが分かる
確認2:キャッシュを削除してみる
faviconの画像を変えたのに変更が反映されない場合はまず疑うと良いと思います。また、見落とすと中々気づけないのがこのパターンです。
確認3:絶対パスで記述する(IE,Edge)
IE、Edgeでは絶対パスでないとfaviconが表示されないようです。他のブラウザで表示されるにも関わらず、IEやEdgeで表示されないときはパスや確認4の証明書まわりを疑うと良いと思います。
参考: http://www.seotemplate.biz/free-seo/2195/www.seotemplate.biz
確認4:証明書まわりを疑う(IE,Edge)
https通信をしているサイトでは絶対パスをhttps://...と書いても証明書の問題で表示されないことがあります。オレオレ証明書を利用していると表示されないようなので注意が必要です。
補足:IEとEdgeだけでいいからfaviconを表示したい時
一応、IE、Edgeのみに表示させたい場合は、画像のパスのみhttp://とSSL通信でなくしてあげれば表示させることはできました。ただし、この書き方(httpsのサイトで画像のパスのみhttpにする)をした場合Chromeではfaviconが表示されなくなりました。
確認5:faviconに関するファイルを削除してみる
ブラウザごとに格納しているfaviconに関するファイルをクリアしてみる方法です(私が試したときにはこれが原因になることはなかったため、感覚としてはあまり頻発しないパターンだと思います)。
補足:何に使われるファイルなの?
ブラウザごとに格納されているfaviconファイルは、お気に入りなどを表示する際に利用されるものです。そのため、ブラウザからキャッシュを消してもこのファイルは消えません。
下記にGoogle Chromeでの格納場所を例として挙げておきます。
- Windows:
Local Settings/Application Data/Google/Chrome/User Data/Default
- Mac:
Machintosh HD/ユーザ/(ユーザ名)/ライブラリ/Application Support/Google/Chrome/Default
おわりに
今回は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/イベント情報
会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください!
◆TECH PLAY
techplay.jp
◆connpass
rakus.connpass.com