Yume
2009年05月11日
02:59
今回は、ファビコン（favicon）を表示させる方法をご紹介します。
ファビコンとは、ブラウザのタブやアドレスバー、ブックマーク（お気に入り）に表示される 16 x 16px のアイコンを指します。また、デスクトップに Web サイトへのショートカットを作成すると、このファビコンがデスクトップアイコンとして使用されることがあります（この場合は 32 x 32px）。
ブラウザに表示される小さなロゴマークのようなもので、サイトのビジュアルイメージをアピールする上で重要な要素のひとつと言えるでしょう。
ファビコンを作成する
Firefox ではアニメーション GIF や PNG 形式の画像でもファビコンとして表示させることが可能ですが、Internet Explorer では ICO 形式（Windows icon）のみとなっているので、ここでは ICO 形式でファビコンを作成することにします。
ファビコンの作成方法は、以下の記事にわかりやすく解説されていますのでご参照ください。Photoshop CS で ICO ファイルを保存可能にするプラグインについても言及されています。
「
Photoshop で背景透過の美しい favicon (ファビコン) を作成する」
私がこのブログ用に作成したファビコンがこちら。
ファイル名は何でも構いませんが、私はいつも「favicon.ico」にしています。
ファビコンをアップロードする
ご存知の通り、ソラマメブログでアップロードできるファイル形式には制限があり、ICO 形式のファイルをアップロードすることが出来ません。その為、外部のオンラインストレージを利用します。
私がお薦めするのは、
Dropbox というストレージサービスです。当ブログでは公開テンプレートをテキストファイル（.txt）で配布していますが、それらは Dropbox のパブリックフォルダにアップロードしたものです。
貴方も私も250MBのボーナススペースがもらえるDropbox招待リンク
Dropbox の利用方法については、以下の記事にわかりやすく解説されていますのでご参照ください。
「
Dropbox徹底解剖 - 一度使ったら手放せなくなる! オンラインストレージサービスの本命 | Web担当者Forum」
HTML テンプレートに手を加える
手を加えるのはテンプレート「トップページ」「個別記事」「アーカイブ」の３つです。
head 要素（<head></head>）の中に以下の link タグを追記します。
<link rel="shortcut icon" href="ファビコンのURL" />
私は他の link タグとまとめることにしました。
以下は「トップページ」の追記例です。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="<%CSSUrl%>" type="text/css" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="<%RDFUrl%>" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="<%RSDUrl%>" />
<link rel="contents" href="<%SiteMapUrl%>" />
<link rel="shortcut icon" href="ファビコンのURL" />
<title><%BlogTitle%></title>
<meta name="description" content="<%BlogDescription%>" />
<meta name="keywords" content="<%BlogTitle%>" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
</head>
完成
これでファビコンが表示されるようになりました。
Dropbox の補足
オンラインストレージは Dropbox の他にも様々なサービスがありますが、Dropbox の良いところは、このパブリックフォルダの存在です。
パブリックフォルダに入れたデータには誰でも（Dropbox ユーザーでなくとも）アクセスすることが可能です。しかし、フォルダ単位での閲覧は出来ません。ファイル毎に割り当てられる専用の URL を使うことで初めてアクセスが可能になるのです。
また、Dropbox は 無料アカウントでも
25GB のディスクスペースが用意されています。いつかソラマメの容量がいっぱいになったら、画像のアップロード先だけ Dropbox のパブリックフォルダに切り替えれば、引き続き画像付きの記事がアップできます（とはいえ、画像のファイルサイズには始めから注意しておくに越したことはありません）。
加えて、今回の ICO ファイルを始め殆どのファイル形式をサポートしていますから、様々なシーンで活用できると思います。