ファビコンといえば16x16のアイコンをico形式でつくればいいんでしょくらいの認識しかなかったが、ちゃんと調べたらいろいろと知らなかったことがあったのでメモ。

ファビコンは16×16だけではない

ブラウザのタブやアドレスバー、ブックマークに表示される16×16のアイコンの他、Windowsのデスクトップにショートカットをおいた場合は32×32、Windowsのエクスプローラーでアイコン表示にした場合は48×48、といった具合に、16×16だけではないケースでもファビコンは使われることがある。

なので、ファビコンを作成するときは、16×16/32×32/48×48の3つのアイコン情報を1つのicoファイルに持たせる、といったことをやるとよいようです。

さらに言うと、macだと64×64や128×128を使ったりするケースがあるので5サイズ、となるわけだが、macでURLをデスクトップにおいたり、Finderで表示したりする人なんてほとんどいないだろうということで、とりあえずは3サイズくらい揃えておけばよいんじゃないかなと。

このブログのファビコンを作成したときの手順

以下のような感じで作成しました。

  1. Inkscapeでデザイン
  2. 48×48、32×32、16×16の3つのサイズでpngで保存
  3. 3つのpngをGimpで開く
  4. 「レイヤー」→「透明部分」→「アルファチャンネルを追加」
  5. 透明にしたい部分を選択して、Deleteキーで削除
  6. 拡張子gifで保存
  7. ファビコン作成サイト(http://ao-system.net/favicon/)を開く
  8. 3つのgifファイルを指定してファビコンを作成
  9. ダウンロード

favicon.icoを作ろう! というファビコン作成サービスは、16×16/32×32/48×48の3サイズのアイコンに対応しているし、透過にも対応しているのでオススメです。
プレビューもこんな感じで表示されて、わかりやすいです。