RAKUS Developers Blog | ラクス エンジニアブログ

株式会社ラクスのITエンジニアによる技術ブログです。

イベント詳細についてはこちらをクリック

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

はじめに

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

faviconって何?

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

f:id:kuwa_38:20190728133805p:plain
favicon_ブラウザのタブ

f:id:kuwa_38:20190728142859p:plain
favicon_お気に入りバー

確認したブラウザとそのバージョン

faviconの表示方法

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

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

参考:

qiita.com

確認1:読み込む画像ファイルを疑う

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

問題の切り分け

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

  • faviconが表示れる任意のサイトへアクセス
  • 開発者ツールからfaviconなどで検索
  • faviconの画像ファイルをダウンロード、自分のサイトでも表示されるか試す → 表示されるなら、自分のサイトの画像が問題であることが分かる

確認2:キャッシュを削除してみる

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

確認3:絶対パスで記述する(IE,Edge)

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

参考: 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での格納場所を例として挙げておきます。

  • WindowsLocal Settings/Application Data/Google/Chrome/User Data/Default
  • MacMachintosh HD/ユーザ/(ユーザ名)/ライブラリ/Application Support/Google/Chrome/Default

参考: www.japan-secure.com

おわりに

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

Copyright © RAKUS Co., Ltd. All rights reserved.