編集(管理者用) | 差分 | 新規作成 | 一覧 | RSS | FrontPage | 検索 | 更新履歴

MakisimaDiary20100922b - *ファビコン

目次

ファビコン


ブラウザのアドレスバーの左端に表示されるアイコンを ファビコン というのだそうだ。

ツイッターのアイコンに使っている  を設定してみることにした。

この  は、 実家のマキシマ研究所のロゴを参考にしつつ、ラフに鉛筆描き、スキャンして、 Adobe Illustrator CS でトレースしつつ整形したもの。 それを PNG に書き出して、Adobe Photoshop CS で縮小している。 PNG 画像の背景は透過になっている。

アイコンの大きさは 16×16 ピクセル。

favicon は favorites icon ということで、 もともとは IE が「お気に入り」用に始めたものだという。 そのため、画像形式が Windows のアイコン .ico である。

Photoshop CS では .ico が標準では読み書きできない。 そこで、プラグインを導入する。

このプラグインは Google 日本語版の比較的上位にあったサイトからたどってみつけた。 他にもプラグインは存在する。 また、Photoshop にこだわらなくても、画像を .ico 形式に変換する方法はいろいろあるようだ。

サイト全体に同じファビコンを設定する場合、 ファイル名を favicon.ico として、ウェブ サイトのルート ディレクトリに置けばよい。 どんなブラウザでも表示できるようにするには様々な留意点があるようだが、 うまく表示されなくても気にしないという程度なら、これで十分。

まとめると、サイト全体へのファビコンの設定は、次のような手順になる。


(2010.09.22)