bingの検索結果に表示されるアイコンとfaviconの記述

favicon が 設定されていないサイトを見かけなくなった今日。

会社のパソコンをリカバリーしたことによりソフトが全て消失。

Sleipnir を愛用していたが、ソフトを入れ過ぎてまた動作が不安定になるのも面倒なので、とりあえずブラウザーは IE を使うことに。

デフォルトの検索は bing。

正直今まで使ったことがなかったであろう bing。

そんな bing でいろいろと検索しているのだが、ふと気が付いたことがある。

なんか検索結果の横にアイコンが・・・

bingの検索結果
bingの検索結果

表示されるサイトとされないサイトがあり、その基準が不明確。

とりあえず favicon の設定だろうと考え、いろいろ調べてみる。

すると、表示されているサイトは favicon の記述がされていない所が多く、またはファイルタイプが指定されていない。

そこで favicon についてちゃんと調べてみたところ、下記のサイトさんに到着。
⇒ favicon.ico は link 要素で明示的に指定するべきか

favicon が IE5 の独自機能であったことを知る。

しかも、わざわざ head に記述しなくてもサイトのルート直下に favicon.icon なるファイルを置いておけば勝手に読み込んでくれるらしい。

そして指定の仕方に違和感が・・・

ファイルタイプが「image/vnd.microsoft.icon」になっている。

こんなの今まで見たことない。

で、調べた結果・・・
⇒ ICO (ファイルフォーマット)

このファイルタイプが現在公式で登録されているそうな。

きっとこれに違いない!

そう思い、サイトの favicon 記述を修正。

<link rel="shortcut icon" type="image/vnd.microsoft.ico" href="/images/favicon.ico">
<link rel="icon" type="image/png" href="/images/favicon.png">
<link rel="apple-touch-icon" type="image/png" href="/images/favicon.png">

ついでに他ブラウザーがサポートしてる「rel=”icon”」も指定。

icon は png 形式をサポートしているそうなので、もちろん png 形式で。

iPhone でブックマークを画面上に置いた際に使用される「rel=”apple-touch-icon”」も指定。

これで表示されるだろう。

なんて思って、表示されていないサイトを見ていたら「image/vnd.microsoft.icon」をちゃんと指定してるサイトが・・・

それに、表示されているサイトの大半は favicon の記述をしていなかった・・・

そうか、ルート直下にファイルを置かないといけないんだ。

とりあえず、直下に favicon.icon を設置。

これで表示されるのか?

追記

続きを書きました。
⇒ 続・bingの検索結果に表示されるアイコンとfaviconの記述

コメントを残す