*ファビコン -FrontPage --> MakisimaDiary --> 2010.09.22 b ---- ブラウザのアドレスバーの左端に表示されるアイコンを ''ファビコン'' というのだそうだ。 ツイッターのアイコンに使っている http://www.makisima.org/wiki/img/logo_MA/20100922b_logo_MA_trsp_16x16.ai.png を設定してみることにした。 この http://www.makisima.org/wiki/img/logo_MA/20100922b_logo_MA_trsp_32x32.ai.png は、 実家のマキシマ研究所のロゴを参考にしつつ、ラフに鉛筆描き、スキャンして、 Adobe Illustrator CS でトレースしつつ整形したもの。 それを PNG に書き出して、Adobe Photoshop CS で縮小している。 PNG 画像の背景は透過になっている。 アイコンの大きさは 16×16 ピクセル。 favicon は favorites icon ということで、 もともとは IE が「お気に入り」用に始めたものだという。 そのため、画像形式が Windows のアイコン .ico である。 Photoshop CS では .ico が標準では読み書きできない。 そこで、プラグインを導入する。 - &link(ICO ファイルフォーマット・プラグイン - Webサイト用FaviconやVista用アイコンをWindowsで作成,http://www.telegraphics.com.au/sw/icoformat.ja.html) --Windows, Photoshop全バージョン対応版（Mac OS用もある） --フリーソフト(GPL) このプラグインは Google 日本語版の比較的上位にあったサイトからたどってみつけた。 他にもプラグインは存在する。 また、Photoshop にこだわらなくても、画像を .ico 形式に変換する方法はいろいろあるようだ。 サイト全体に同じファビコンを設定する場合、 ファイル名を favicon.ico として、ウェブ サイトのルート ディレクトリに置けばよい。 どんなブラウザでも表示できるようにするには様々な留意点があるようだが、 うまく表示されなくても気にしないという程度なら、これで十分。まとめると、ファビコンの設定は、次のような手順になる。まとめると、サイト全体へのファビコンの設定は、次のような手順になる。 - 大きさ 16×16 ピクセルの画像ファイルを .ico 形式に変換。 - 作成した .ico ファイルの名前を、"favicon.ico" に変更する。 - そのファイルをウェブ サイトのルート ディレクトリに置く。 ---- (2010.09.22)