今回はSVGをfaviconとして使う方法を紹介したいと思います。
faviconはサイトごとのアイコンで、ブックマークのリストの横に表示されたり、タブのタイトルの横に表示されたりするアレです。

SVGは、JPGやPNGと違ってベクトルデータであり、パスによって記述されるため、拡大させてもギザギザになったりすることはありません。Illustratorで作られた画像と同じ原理です。拡大縮小で画像が粗くならないため、図やグラフの出力に適していると言われます。
また、SVGはアニメーションをさせることもできます。その機能をフルに活用した作品としてカヤックが公開したSVG女子が一時期話題となりました。マイクロソフトのIE9のデモとしてアメリカで発表された作品です。技術はもちろんのこと独特の世界観がおもしろい作品になっているので、見たことのない(試したことのない)方は一度触って見ることをおすすめします。

今回SVGをfaviconとして使う理由は、編集のしやすさとサイズ変更の柔軟性のためです。通常はfaviconは16×16のサイズで表示されますが、場合によっては(デスクトップにウェブサイトへのリンクを張った時とか)それ以上のサイズで表示されます。そのためicon形式の場合はいくつかの画像サイズをあわせて作っておく必要がありますが、SVGなら拡大しても粗くならないためその必要がありません。SVGファイルをひとつ作っておくだけで各種サイズに対応できるため、編集しなおす際にも非常に楽です。

なお、FirefoxとOperaはSVGのfaviconに対応していますが、Chromeは対応していません。IE9も対応しているようですが、表示されたりされなかったりでちょっと不安定です。

faviconの作成

SVGはドローソフトと呼ばれるもので作成します。Adobe Illustratorや、Inkscapeなどが有名です。Inkscapeはオープンソースソフトウェアなので無料で扱うことができます。

Illustratorでの作成

Illustratorで作成をする場合は、ドキュメントを16ピクセル×16ピクセルや32ピクセル×32ピクセルといった正方形のサイズで作成します。正方形であればどんな大きさでもいいのですが、なるべく表示サイズに近いほうがプレビューしやすいと思います。

faviconが作成できたら、「保存」もしくは「別名で保存」からSVG形式を選んで保存します。名前は「favicon.svg」にしておきます。SVGオプションは特に変更する必要はありません。

Inkscapeでの作成

Inkscapeで作成をする場合は、ファイルの新規からicon_16×16やicon_32×32など、正方形のサイズを選んで作成します。

作成が終わったら、「名前をつけて保存」から保存形式をプレーンSVGにして保存します。こちらもやはり名前は「favicon.svg」にします。

faviconの設置

作成したfavicon.svgを、サーバーへアップロードします。FirefoxやOperaなら場所はどこでもいいのですが、IEはルートディレクトリでないと認識しないようなので、ルートディレクトリにアップロードします。

続いて表示させたいサイトのHTMLのhead要素内に、

<link rel="shortcut icon" type="image/svg+xml" sizes="any" href="/favicon.svg" />

と指定します。

faviconを更新する際の注意点

以上でfaviconが表示されるはずですが、場合によってはうまく表示されない時があります。 これはfaviconのキャッシュが残ってしまっているのが原因で、faviconを更新させるには一度キャッシュを消してやらねばなりません。(これはSVGのfaviconに限ったことではないです)
各ブラウザでブックマークのfaviconを更新する方法 : web memo.Ver.2