Webツールで画像をfavicon（ファビコン）に変換してくれるサービスは色々あります。便利なのですが、画質や背景が透過に出来なかったりと完成度が物足りない場合があります。

Safariなどアドレスバーの背景が白い物は、favicon（ファビコン）の背景も白で作成すればよいので気になりません。しかしFireFoxのアドレスバーやIE8のタブバー部分は気になってしまいますよね

私の場合、Photoshopで元画像を作成しているので、Photoshop上で透過背景のfavicon（ファビコン）を作成する方法を少し調べてみたところ、プラグイン「icoformat」で可能でした。透過背景のfaviconにするとFireFoxで下画像のような感じで表示されます。

以下、覚え書きです。

（1）まずプラグイン「icoformat」をダウンロードします。
http://www.telegraphics.com.au/sw/#icoformat

（2）続いてダウンロードしたプラグインをPhotoshopが起動していない状態で、下記に配置します。
例）Mac OS X + Photoshop　CS3
アプリケーション / Adobe Photoshop CS3 / プラグイン / ファイル形式

（3）Photoshopを起動して32ピクセル × 32ピクセルで画像を作成します。
このとき背景を無し（透明）にしておけば最終的に透過のfavicon（ファビコン）になります。
（4）favicon.icoというファイル名で保存します。
保存時は、プラグインで追加された【ICO (Windows Icon) 】形式を選択します。
以上でfavicon（ファビコン）作成完了です。

HTMLに貼り付け際は、内に下記のように記述します。

<link rel=”shortcut icon” href=”実際のfavicon.icoのURL”>

ちなみにfavicon（ファビコン）を作成してくれるWebツールもいくつか紹介しておきますね。

http://www.favikon.com/
http://www.html-kit.com/favicon/
http://www.chami.com/html-kit/services/favicon/