favicon の背景透明化

アドレスバーの URL 横っちょや、ブックマークした URL の横にある小さなアイコン...
Shonan OnO は、ホヌをモチーフにした favicon（ファビコン）にしてみました...
実物は昨日の日記にアップしてまぁ～す...

何も気にせずに作ってアップしてみたものの、表示されたアイコンを見てみると、んっ。。。奇麗じゃない...
で、ネットで調べてみると Photoshop で背景を透明にできることがわかったので、備忘録として書いておくことにした。

[Web ツールを使った作成方法]
* この方法では、背景を透明にした gif を準備しても、残念ながらジェネレートする際に透明部分が無効になるみたい。
1. 16×16 をイメージして、適当な正方形のサイズで画像を準備する。
2. FavIcon from Pics で ico ファイルに変換（見たらわかるので説明不要）する。
3. xxx.icon をHP（ブログ）のルートへアップする（xxx は favicon のファイル名）。
4. 表示設定として <link rel="shortcut icon" href="http://○○○/xxx.ico">を meta の中に追加する（○○○ はアップしたルートのパス）。

[Photoshop を使った作成方法]
* バージョンは CS, CS2 だと問題ないみたいです。なお、プラグイン: Photoshop icoformat ICO(Windows Icon)Format Plugin のインストールは、既定のプラグインディレクトリへコピーして Photoshop を起動するだけ、これで背景を透明にできます。
1. 32×32（favicon.ico ファイルのカンパスサイズ）あるいは 64×64 で画像をデザインする。
2. 作成した画像を 32×32 へサイズダウンする。画像解像度でサイズダウンする際に、バイキュービック法（シャープ）を選択して解像度ダウンの画像ボケを少なくする（アルファチャンネルで○△□のような面倒な作業は不要）。
3. インストールしたプラグインで追加された ICO（Windows Icon）フォーマットを選択して保存する。
4. xxx.icon をHP（ブログ）のルートへアップする（xxx は favicon のファイル名）。
5. 表示設定として <link rel="shortcut icon" href="http://○○○/xxx.ico">を meta の中に追加する（○○○ はアップしたルートのパス）。

わかりにくい になっちゃったけど、メチャ簡単です...
全然気にしてなかったけど、favicon ってそれぞれ自己主張があって気になってきたなぁ...