豆袋

編集

用意する画像のサイズ
16x16
32x32
48x48
だいたい、この3サイズ用意すれば、それほどゆがみも発生しないだろう。

まずは１６の倍数で大きい画像を作成、
今回は192px四方のサイズで元の画像を作成。
それをコピーして、各サイズに縮小。
あとは、それをそれぞれ透過させる。（減色するので注意）
あとは、サイズ違いの各画像を
ファビコン作成サイトで投入。


ファビコンを作成できるサイト

背景が透過したファビコンを作ろうと思って
こっちのサイトで作成してみた
↓
半透過マルチアイコンfavicon.icoを作ろう!　
http://ao-system.net/alphaicon/index.php

・・・結果、うまく表示されない。
真っ黒な感じになってしまった。
使用した画像は、
3種類の大きさの画像で、
背景を透過させたpngの画像。
何がいけなかったのか・・・？
サイトには、
PNG36(PNG24アルファチャンネル付き)画像を使用してください
と書いてあるのだが、その規格の意味がよく分からないし、
自分が使っている画像加工ソフトでは多分指定できないっぽい。

ということで、結局、ダメもとで
その同じ画像を使ってこっちのサイトでつくってみた。
↓
ファビコン favicon.icoを作ろう!
http://ao-system.net/favicon/index.php

htmlに記入する時の厳密な指定はコチラを。
↓

お気に入りアイコン（ファビコン）を指定する
http://www.tagindex.com/html_tag/page/link_favicon.html

例えば、ファビコンで使用する画像がICO形式で作成されている場合は、以下のように記述します。
type="image/vnd.microsoft.icon"

<link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.icon">

結果、一応ちゃんと背景が透過したファビコンをつくることができた。
そもそも、
ファビコンになる以前に輪郭の処理がイマイチだったのだが、
まぁ、実際に表示されているものを見ると
まずまずの出来栄え。
もっと完璧にしたければ、
ペイントソフトで背景を透過させるときに、
「許容値」の設定をもっとシビアにすべきなのかもしれない。
自分は、許容値４０でつくってみたが、
もっと高い数値にすれば良かったのかも知れない。
まぁ、とりあえず、今回はこれで良しとする。


参考文献

シーサーブログにファビコンを設置しよう
http://gazocustomize.blog.fc2.com/blog-entry-23.html

ファビコン用の画像を綺麗に見えるように作る。　たりほん
http://talihon.seesaa.net/article/412279491.html