2015年2月20日

ブラウザSafariでfavicon表示修正

手に入れたiPad Air 2のブラウザ Safari(サファリ)で、このブログサイトMASAa.blogFMAZDAをお気に入りフォルダにブックマークすると、なぜかfavicon(ファビコン)が表示されていません。
(※ブラウザで、URLのとなりに表示されているアイコンのことをファビコンと言います。)

サファリブラウザ ブックマーク ファビコン表示改善前

PC側では、Google Chrome、Microsoft Internet Explorer、Mozilla Firefoxの3種類のブラウザで確認しているのですが、何れも正常に表示されています。

そう言えば自分のスマートフォンXperiaでYahoo!ブラウザを使っているのですが、これも正常にファビコンが表示されていませんでした。

ブログはMovable Typeで構築しているので、そのヘッダーのソースを確認してみると若干記述にミスが有ったので修正することに。

しかし、これでは正常に表示されません。

元々MASAa.blogやFMAZDAのファビコンは、「favicon.icoを作ろう。」サイトでマルチアイコン対応のファビコンを作成(元エントリー記事)して利用しているのですが、一部のブラウザでは、マルチアイコンのファビコンが利用できないと言う事なので通常のアイコンに作り直してみました。

作ったアイコンを拡張子icoに変換しファイル名を"favicon.ico"としてサーバーにアップロードします。

結果は、半分正常になりました( ̄。 ̄;)

と言うのは、iPad Air 2のブラウザ Safariで、MASAa.blogをお気に入りフォルダにブックマークするとファビコンは正常に表示されるのですが、そのファビコンをクリックして自分のブログサイトを表示して再びブックマークを表示するとファビコンが消えてしまっています。

サファリブラウザ ブックマーク登録

改めてブックマークすると正常にファビコンは表示されます。

つまり、一度MASAa.blogにアクセスするとファビコンが消えてしまう症状に変わりました。

とりあえず一歩前進なのですが、なぜ?

ネットで調べても原因が分からず、一旦保留することに。

後日改めて原因を追及してみると。

作成したファビコンは、"images"と言うフォルダを作成して、その"images"フォルダに作成したファビコン"favicon.ico"をアップロードしておいたのですが、アップロードする場所をMovableTypeのルートディレクトリに変更してみました。

サファリブラウザ ブックマーク ファビコン表示改善後

結果正常に表示するようになりましたヽ(^。^)丿

ファビコンってルートディレクトリにおかないといけないのですねσ(^◇^;)

これは、iPad Air 2のブラウザ Safariでは正常にファビコンが表示されるようになったのですが、自分のスマートフォンXperiaのYahoo!ブラウザでは、改善されていません。

ヤフーブラウザ ブックマーク ファビコン表示改善前

これは直ぐに改善できました。

その対応は、作成したファビコンのサイズを、128x128から96x96に縮小して作り直したところFMAZDAのファビコンも正常に表示されるようになりました。

ヤフーブラウザ ブックマーク ファビコン表示改善後

Clip to Evernote
このエントリーをはてなブックマークに追加



トラックバックURL

このエントリーのトラックバックURL:
http://masaa.me/cgi-bin/mt-tb.cgi/3641

コメントする