favicon を付けてみた - または favicon 作りのコツ

2007/07/08

そういえばこのサイトって favicon を付けてなかったなぁ……と,今さらながらに気がついたので,作ってみました。もう,安直っつーかなんつーかなデザインなんですが。

qune の favicon の図
図1 qune の favicon の図

favicon というのは16x16(pixel)のアイコンのこと。最近のブラウザでは,URL の入力欄やタブの端っこに表示する機能があるはずです。いちいち説明する必要もないんでしょうけど。

16x16 の画像を作るというと,ドット絵を書かなきゃいけないのかと思っちゃうかもしれないけれど,実際そんなに難しくありません。大きめに作った画像を16x16に縮めればいいだけですから。ここで作ったアイコンは,表題のロゴを Gimp で縮めて作ったんですけれど,正味15分くらいでできちゃいました。まぁ……モトが単純だからなんですけどね。

もっとも,単純に縮小すればいいかというと,そういうことでもないみたい。favicon はブラウザ上でサイトを区別するための目印ですから,凝ったデザインにするよりも単純なものにした方が,いい目印になる気がします。試しに BSD 系 OS のサイトでどんな favicon が使われているのか見てみると,こんな感じ(※ qune の favicon は参考)。

BSD 系 OS の favicon 比較の図
図2 BSD 系 OS の favicon 比較の図

BSD 系のサイトで見る限り,FreeBSD の favicon が一番視認性がいい感じがします。NetBSD は旗のマークなんですけれど,あたしのブラウザだと柄の部分がブラウザの色に溶け込んでしまっています。また,それとは反対に OpenBSD のロゴは,凝りすぎていて画像が潰れています。OpenBSD のロゴはあたしのお気に入りなんですけど,この favicon だけを見て OpenBSD のハリセンボンと認識するのは難しいんじゃないでしょうか。

そういうわけで,favicon 作りあたっては,以下のような点を念頭に置けば,良さげなものができそうな感じ。

  • デザインは単純に

  • サイトと何かしら関係のあるデザインに

  • ブラウザの背景色に溶け込まない工夫を(背景を透明にするときは慎重に)

  • 少なくとも,デフォルトのアイコンよりは目立つように

箇条書きにするようなことでもないんですけどね。画像を縮小した後で,潰れている箇所を少し掃除するだけでも,認識しやすくなるんじゃないかなーとは思います。

Site Navigation
SNS Accounts (@aian)

普段はここら辺に住んでいます.