« 金剛地武志さんがJ-WAVEでナビゲーターやってる !? | main | 5/7(Sun)チケット予約受付、あと約12時間後には締切です! »

2006年05月04日

Favicon(ファビコン)のつくりかた

ブラウザのURLが表示される左横に、小さなアイコンが表示されるサイトがありますよね? ヤフーとかグーグルとかミクシィみたいな大きなウェブサイトだと必ずあるので、あれってどうやって作るんだろう?とずっと思っていたのですが、なにわともあれのお兄さん@「Webdog」でその作り方が紹介されていました。

お気に入りアイコン(favicon.ico)自動生成サービス

この小さなアイコンは、Favicon(ファビコン)というそうです。「favorite icon」=お気に入りアイコンの略なんですって。上記リンク先をざっと読んだ限りではかなり簡単にできそうな気がしたので、さっそくorbit blenderのファビコンをつくってみました。

favicon_ob.JPG

最終的には、上記の記事で紹介されていた「FavIcon from Pics」でうまく行ったのですが、何度かエラーが出てしまったので、別のところでできないかなぁと探していたら、日本語ドメインのサイトがありました。

ファビコン・ジャパン

こっちを使ってもうまく行きました。上記のサービスを使って「favicon.ico」というファイルをつくることができたら、これをFTPでサーバに直接アップロードして、HTMLファイルのタグ内の適当な位置に、

と書き込んであげると、ファビコンが表示されるようになりました。おお、こんなに簡単にできるものなのですね!

とはいえ、完璧にうまくいったわけではないので、ここで注意しておきたい点をいくつか箇条書きにしてみます。

●最終的に正方形の画像が縮小される形で生成されるので、元画像も正方形を用意しないといけない
●自動的につくられた「favicon.ico」ファイルは、各htmlと同じ階層にないとダメっぽい。※よくわかりません。
●ブログの場合、各テンプレートのタグ内にそれぞれ埋め込んであげないといけないかも。※これもよくわかりません。

あと、Movable Typeのバージョンを3.2-ja-2にアップデートしてからというもの、どうも再構築の調子が悪くて、途中で止まってしまうため、ページによってはファビコンがうまく表示されないままになってしまっております(泣)。

仕方がないので、当面はこのまま放置になりそうです(泣)。ゆくゆくは全ページにファビコンが表示されるよう微調整したいと思います。ブログの再構築って時間がかかるんですよねぇ。。。

Posted by ats
2006年05月04日 23:45


Trackback

Trackback URL:
http://www.orbitblender.net/mt/mt-tb.cgi/2484

Comment

と、さんざんいろいろ書いてから気づいたのですが、
もしかして、IEではファビコンはぜんぜん表示されない???

うーん、IEって、小さなアイコン部分がすべて「e」マークですよね。
せっかくつくったのに、ほとんどの人はIEを標準ブラウザで
使っていそうなので、あんまり意味なかったかなぁ(苦笑)。


私はFIREFOXを使っているのですが、とても快適なブラウザです。
Operaも捨てがたいので、IEいまいち~という人は、ぜひ試してみてください。

▼FIREFOX
http://www.mozilla-japan.org/
サファリがちょっとアレなので、Mac OS X ユーザーにはオススメかも。

▼Opera
http://jp.opera.com/
動作が軽いです。表示能力はFFのほうが上かなぁ(いずれも個人的主観)。

Posted by ats
2006年05月05日 01:27

Please post a comment.




保存しますか?