ブラウザでサイトを見ていると、アドレスバーに独自のアイコンが表示されているサイトがあります。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)の部分は各自のブログのアカウントに置き換えてください。
「保存」をして、再構築すれば完了です。
Faviconを変えたり、編集したときは元のファイルを上書きすればいいんですが、Safariの場合、元のデータがしっかり残っていてキャッシュをクリアした程度では変わらないんです。このせいで不完全のFaviconに付きまとわれて散々苦労しましたが、Safari Icon ManagerというFreewareでUpdateした結果、新しいFaviconが表示されるようになりました。このソフトって、Favicon管理のために作られたソフトのようです。私だけでなく、悩んでいた人がいたということですね。いいもの作ってくれるわ、ホントに!