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

favicon 設定をなんやかんやいじりましたが・・・

結局まだ反映されておりません。

何がいけないのだ。

bing のクロールが遅いってのも一つの要因ではあると思いますが・・・

今度は表示されているサイトに絞って、header の記述や favicon のサイズをリサーチ。

やはり、表示されているサイトは大半が header に favicon の設定を記述していない。

「type=”image/vnd.microsoft.ico”」を設定していないのもまた然り。

そしてもう1点、「rel=”icon”」を設定していない。

これも何か関係するのだろうか。

favicon のサイズを調べるために、各サイトの favicon に直アクセス。

64px だったり 32px だったり 16px だったり・・・

統一性は感じられない。

何がいけないのか全く不明。

とりあえず自分のサイトの favicon に直アクセス。

すると画像が表示されず、ダウンロードされてしまった。

あー、マルチアイコンにしてるからいけないのか。

ちなみにマルチアイコンとは、複数の favicon 用画像を1つの favicon として変換したもの。

16〜48px の中から3つほど設定しておくと、その都度見合ったサイズの画像を自動で使用してくれるという優れもの。

最近では 64px まで OK な所もありますね。

そんな優れた技術を使用していましたが、たぶん画像として認識するには如何せんグレーゾーンなのでしょう。

ということで普通の画像1つのみの favicon に変更。

しかし、表示されることなくまたまたダウンロードされました・・・

うーん、待てよ・・・これは・・・

ダウンロードされたということは、画像として認識されてないってこと。

ということは、サーバー側に「.ico」は画像ですよって設定がされてないということなのでは・・・

なので下記設定を .htaccess に追記。

AddType image/x-icon .ico
<Files favicon.ico>
ErrorDocument 404 ファビコンをアップロードしたURL
</Files>

「AddType image/x-icon .ico」は、拡張子が「.ico」のファイルは「image/x-icon」タイプなんですよって記述。

設定を説明しているサイトさんで「AddType image/xicon .ico」と書いてるサイトさんがありますが、自分のサーバーはこの設定では動きませんでした。

もし動かない場合「AddType image/x-icon .ico」に書き換えてみてください。

<Files favicon.ico>
ErrorDocument 404 ファビコンをアップロードしたURL
</Files>

これは直下に favicon を置いていない場合にファビコンの場所を教えてあげます。

もちろん「ファビコンをアップロードしたURL」て書かれてるところはファビコンを UP した場所の URL に書き換えてくださいね。

ただ、この方法は「404 Not Found」になった後に参照される形になるのでエラー扱いです。

なので、できるだけ直下にも置いておく方が無難でしょう。

なぜ、直下にも置いた方がいいのか?

前回紹介した下記のサイトさんでも書かれていますが、今どきのブラウザはサイトにアクセスしてきた際に、直下の favicon へのアクセスも試みるようです。
⇒ favicon.ico は link 要素で明示的に指定するべきか

もしどうしても直下に置くのが嫌なのであれば、先ほどの 404 の方法の他にリダイレクトで表示する方法もあります。

RewriteEngine On
RewriteCond %{REQUEST_URI} ^/favicon.ico$
RewriteRule (.*)favicon.ico$ ファビコンをアップロードしたURL [L]

.htaccess に上記の様に設定すれば、直下の favico.ico にアクセスがあった場合、指定した URL にリダイレクトしてくれます。
※この設定をする場合は上で書いた 404 の設定は不要です

ただし、このリダイレクトでの方法が良いか悪いかはわかりません。

なのでできるだけ直下にも置きましょう。

この状態で試した結果、ちゃんと画像として表示されました。
※画像表示されたのは IE のみで Chrome 等はダウンロードされます

たぶんこれで大丈夫・・・であろう。

今回行った設定をまとめると・・・

  1. 「rel=”icon”」の行と「rel=”apple-touch-icon”」の行を消す
  2. 「rel=”shortcut icon”」の行の「type=”image/vnd.microsoft.ico”」の記述を消す
  3. .htaccessに「AddType image/x-icon .ico」の設定をする

以上。

追記

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


コメントを残す