続・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の記述

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です