Faviconを設置しました。

| コメント(5) | トラックバック(0)

favicon.jpg

 ブラウザでサイトを見ていると、アドレスバーに独自のアイコンが表示されているサイトがあります。Appleはリンゴのマーク、Yahoo!は「Y!」マーク、Googleは「G」マークなどです。
 これはFavicon(ファビコン)というのですが、アドレスバーだけでなくブックマーク(お気に入り)に登録したときに、Faviconもいっしょに登録されるのでカラフルになって見つけやすくなります。Safariの場合は、デフォルトのアイコンは青い地球マークが表示されますが、ブックマークがたくさんあると地球だらけで区別しにくいんですよね。

 Favicon Japanによれば、FaviconはもともとはInternet Explorerの独自機能だったようですが、Mac版のIEでは対応外のため何も表示されません。IEはWin版でもかなりお寒い状況のようです。むしろ新興勢力のタブブラウザが軒並み対応してきているようです。Microsoftもいよいよブラウザまで手が回らなくなったのかな?まあ、Mac版はもうなくなったからいいんでが、せっかくFavicon作っても一番普及しているブラウザで見てもらえないんじゃ悲しいですね。というよりIEしか使っていない人はFaviconの存在すら知らないということも考えられますね。
 Windows版Internet Explorerをお使いの方は是非、Firefoxをダウンロードして使ってみてください。
 MicrosoftのHPをみるとFaviconがないわけではなく、紙っぺらのようなFaviconが表示されます。こんな中途半端なFaviconを作る意図はどこにあるのかな?

 何はともあれFaviconはGIF、JPG、PNGから簡単に作れるので、早速トライしてみました。
 まずは画像を用意します。表示されるのは正方形なので、出来るだけ正方形にしたほうがいいでしょう。また、最終的には16×16ピクセルになるので、細かい画像は避けます。
 次にFavicon Japanのサイトに行き、用意した画像からFaviconを作成します(ファイル名はfavicon.icoにします)。
 出来たFaviconをHPのindex.htmlと同じ階層に置き、index.htmlの<head>タグ部分に、

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

を挿入します。
 そして、これをアップロードすればFaviconが表示されるようになります。

 また、SeesaaブログはHTML編集が可能なので、ブログでもFavicon設置が可能です。
 まず、ファイルマネージャにFaviconをアップロードします。
 次に、「マイ・ブログ」「デザイン」「HTML」を開きます。「HTMLの追加」をクリックし、適当な名前を付けて、<head>タグ内に

<link rel="shortcut icon" href="http://macdenogyo.up.seesaa.net/image/favicon.ico">

を挿入します。アカウント名(macdenogyo)の部分は各自のブログのアカウントに置き換えてください。
 「保存」をして、再構築すれば完了です。

SIM.jpg Faviconを変えたり、編集したときは元のファイルを上書きすればいいんですが、Safariの場合、元のデータがしっかり残っていてキャッシュをクリアした程度では変わらないんです。このせいで不完全のFaviconに付きまとわれて散々苦労しましたが、Safari Icon ManagerというFreewareでUpdateした結果、新しいFaviconが表示されるようになりました。このソフトって、Favicon管理のために作られたソフトのようです。私だけでなく、悩んでいた人がいたということですね。いいもの作ってくれるわ、ホントに!

トラックバック(0)

トラックバックURL: http://www.macdenogyo.net/mt/mt-tb.cgi/36

コメント(5)

あれ、昨日見た時はFaviconが表示されなかったのですが今見たらありました(^_^;)
多分「Reset Safari」やったから見えるようになったのかも。

ちょっと小さくてよく解らないのですが昔のStuffItのアイコンっぽいですね(*^▽^*)/

メコノプシス(ヒマラヤの青いケシ)の花をfavicon化してみたんですが、わかりませんかね。
http://macdenogyo.up.seesaa.net/image/meco.jpg

StuffItのアイコンって、どんなんでしたっけ?

yusakuさん♪
16×16だと小さくて難しいですよね。
同じグラフィックのもう少し大きいサイズのものを、サイト内に表示するようにしておけば「ああ、これをFavicon化したのね」って感じで解りやすいんじゃないでしょうか(*^o^)/

Ranさん、ありがとう!!
早速、試してみましたが・・・どうですかね?
少しはわかりやすくなったかな?

ええ、拝見しました!ばっちりですね(o^-')b
最初の数秒はFC2Analyzerのバナーとかぶってしまいますが消えればちゃんと見れます。このバナーは右とか下に設定出来ないのかな?

コメントする

カレンダー

<   2006年5月   >
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31      

このブログ記事について

このページは、宮下勇作が2006年5月 7日 17:17に書いたブログ記事です。

ひとつ前のブログ記事は「春の恒例のキャンプ」です。

次のブログ記事は「堆肥の施用」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

ウェブページ

Powered by Movable Type 4.261