faviconを設置。IEでエラーがでて苦労した。

メインサイトなどにfaviconを設置してみました。 faviconというのはウェブサイトをお気に入りにいれたとき、タイトルの横とかにでてくる小さいアイコンのことです。ヤフーだったら「Y!」みたいなので、楽天だったら「R」が○で囲まれているみたいなマークがでているでしょう。あれです。
旅ナビの「旅」にあたるロゴを16x16で小さく縮小した画像を使ってみました。 これから世界の食べ物や島旅なども作ってみます。
ところで、最初はこのアイコンをpngで保存してたんですが、firefoxやgoogle clomeでは表示されるのにIEでは表示されませんでした。外で確認してたので「IEのバージョンが古いからかな」と思ったのですが、帰宅して最新版のIEで確認しても表示されない。実は、IEってこのfaviconに結構厳格らしい。これまでHTMLに誤りがあっても平気で表示していたブラウザとは思えないです。

調べたところ、pngファイルではだめみたいなんですね。
だからico形式に保存し直しました。

ファイルの変換は@icon変換というソフトを使います。

注意していただきたいんですが、左サイドのバナーと最下部にあるバナーは広告です。
私はうっかりクリックして、特に最下部のバナーのソフトはダウンロードしてしまった。
ダウンロードが終わってからソフトが違うことに気づき、慌ててアンインストールしましたが、 クリックしてしまうだけなら無料でソフトを使わせていただくので問題ないにせよ、 よくわからないソフトをダウンロードしてしまったのが怖かったです。
やっぱ英語でしか表記されないソフトはちょっと使いたくない。

正しくダウンロードするのは、記事の中のダウンロード項目のリンクをクリックです。

で、作成したpngファイルをこのソフトでicoに変換したのですが、
それをそのままアップしても正しく表示されないんですね。

なんでかな~と思って、参考までに楽天ブログのソースを確認したら、

< link rel="shortcut icon" href="/favicon.ico" >

という表記だったのです。 私、ファイル名をtabinabi-favicon.icoとかにしていたので、
これをfavicon.icoになおしました。
そして、ファイルの設置場所もルートにしましたら、表示成功!

clomeの方も問題なく表示しているので大丈夫だろう。

なんかこういうのをみると、いっちょ前のホームページのようですわね。

最近、海外旅行にでてませんので、今はデザインとか情報整理に時間を割いてますが、
「世界の食べ物」のようにもうすこし認められるサイトにしたいものです。
出発が旅行記だったので、すでに古くなって使えない情報になっているから
仕方ないところもあるんですけどね。

島旅なんて、さいきん、島旅にでてないからな~。

前へ

ちょっくら九州までいってきました。台風大変だったんですね。

次へ

油淋鶏ユーリンチーのレシピ