Developer's Blog

Sleipnir でのファビコン表示・変更方法について

WebDevBlogTitle

こんにちは、フェンリル WEB 担当の青野です。
今回は Sleipnir でのファビコン表示方法について書きたいと思います。

■まずファビコンとは

ファビコンとは WEB サイトを閲覧した時に、
下の画像のようなサイトロゴ、企業ロゴなどをタブに表示し、
分かりやすくしてくれるものです。

ファビコンイメージ

このようなファビコンを使用する場合は、基本的に下記の二つの方法が挙げられます。

  • 1. ルートディレクトリに「favicon.ico」を置く。
  • 2. <link>タグでのファビコン指定。

通常は、1 の方法で問題ありません。

「特定のページでファビコンを変えたい!!」という方は、
2. の方法で実現できます。

■Sleipnir でのファビコン表示方法について

Sleipnir はページを読み込む際の速度向上のため、一度取得したファビコンはキャッシュしています。

そのため、上記2つの方法でファビコンを指定してみたけど、Sleipnir で表示してくれない!または、変更されない!ということがあるかと思います。
そういうときのために、いくつか原因と思われるものを挙げていきます。

● 1. の方法で指定したのに変更されていない場合。

上にも書きましたが、Sleipnir はページを読み込む際の速度向上のため、一度取得したファビコンはキャッシュしています。
つまり、キャッシュが残っている限り、ファビコンを変更してもキャッシュされたファビコンを優先して表示するため、変更を適応するにはキャッシュを削除する必要があります。

キャッシュの削除方法は、メニューバーにある、「ツール > Sleipnir オプション > クライアント > 終了」 にある「Faviconのキャッシュ」にチェックを入れて [OK] を押してください。
その後再起動することで、新しくファビコンを取得することができます。

● 2. の方法で指定したのに変更されていない場合。

この場合は、いくつか原因が考えられます。

・rel=”icon” で取得できない
まず <link> タグの指定ですが、rel=”shortcut icon” でするようにしてください。
rel=”icon” で指定した場合は、Sleipnir でファビコンを取得できません。

例:

<link rel="shortcut icon" href="hogehoge.ico" type="image/vnd.microsoft.icon" />

・1.の方法も同時に指定している場合
Sleipnir はキャッシュされたファビコンがある場合そちらを優先します。
このことから 1. の方法で指定しているページを先に閲覧すると、ドキュメントルート以下すべてのページで 1. で指定したファビコンを表示するようになるので、<link> タグでの指定は無視されてしまいます。

<link> タグで個別に指定したいページがある場合は、個別ページ以外でも <link> タグによる指定をしてください。

・ローカル環境にあるファビコンを指定している場合
2. の方法で指定している場合のみ、Sleipnir はローカル環境にあるファビコンを取得できません。
2. の方法を使って Sleipnir でファビコン表示を確認する場合は、インターネット上にファビコンをアップロードしてから、指定をするようにしてください。

以上で、Sleipnir でファビコンが表示できるようになると思います。
Sleipnir のファビコン表示で悩んでいた方はお試しください。

Copyright © 2019 Fenrir Inc. All rights reserved.