ふぁびこんのつくりかた

ウェブサイトを立ち上げる時に忘れないようにすることのひとつに、ファビコンを設置するというものがある。
ウェブブラウザーのアドレスバーやお気に入りに表示されるあのアイコンである。
よくやるやり方は、httpdocs配下にfavicon.icoというファイルをセットして、

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

とするものであるが、これだけだと不十分な場合がある。

各種ブラウザー向け、スマートデバイスのホーム画面へのセットまで考慮するなら、以下の手順がおすすめ。

  • まず、260 x 260 のPNG画像を用意する
  • こちらの Favicon Generator. For real. というサイトを使う
  • Select your Favicon picture から用意したファビコン画像をアップロードする
  • 見た目のオプションをお好みで調節する（デフォルトで問題ない）
  • Favicon Generator Options にファビコン画像を格納するパスをセットする*1
  • 諸々の設定を終えたら、Generate your Favicons and HTML code をクリックする
  • Favicon package をクリックして.zipをダウンロードする
  • .zipを解凍して自分のサイトに配備する（3つ前の手順で指定したパスに置くこと）
  • 画面に表示されたHTMLコードをコピーして、自分のサイトのトップページのHTMLのhead内に貼り付ける


まあ、このサイトに限らず、これ系のツールを使って、1つの元画像から各種プラットフォーム向けのファビコンを自動生成するのが楽かと思われ。
てか、こういうのも規格で統一してくれないのかねぇ。

*1:デフォルトではドキュメントルートに配置するようになっているが、個人的にはそれはお勧めしない。サイズ調節されたアイコン画像やメタ情報を含むファイルが多数生成されるので、/favicons とかに隔離した方が良い