ADP: Web Designアーカイブ

faviconにこだわる

2008年09月28日 15:22 | パーマリンク | コメント(0) | トラックバック(0)

ADPのfavicon、色合いがリニューアル前のままだったので、作り直した。変わってないぞ、という場合は、ADPのfaviconを直接見て再読み込みしてほしい。

今まで同様、Photoshopでアルファチャンネルつきの16 by 16 pixelsのPNGを作成し、@icon変換を使ってWindows icon形式に変換した。いいなあと思っていたmixiやlivedoor Blogのアイコンを見ながら作ったので、似すぎてしまったかも。

faviconはタブブラウザ全盛の現在ではこだわる価値がある。古くなってしまったADPのfavicon系エントリのリニューアルも兼ねて、どの点にこだわるべきかをまとめてみよう。

0. いまだに形式はWindows Icon形式（.ico）がいいようだ。Windowsのみならず、MacのFirefoxやSafariでもちゃんと表示してくれる。16 * 16は必ず作り、あとはお好みで。

1. 必ずブラウザで確認する。特に、WindowsのOperaはデフォルトのタブの色が濃いので、思っていたのと違うように見えることがある。それ以外にも、メニューバーのBookmarksやHistoryでハイライトが当たったときなどで背景色が濃くなる場合がある。どう違うのかよくわかるように、以後のサンプルはすべてOperaのタブでの見え方にしている。

2. 色数は使えるだけ使う。どうせ普通のブラウザで見えるのは16 by 16 pixelなので、頑張っても256色にしかならない。ロゴのアンチエイリアスをしないとカクカクが見えすぎてしょぼくなるので、ちゃんとやる。

Yahooのfavicon (256 by 92 pixels, 3.97KB)

3. 四隅を丸く見えるようにしたいからといって、四隅を白で塗ってしてしまうとちょっと恥ずかしいことになる。ちゃんと透明にしよう。

Bloglinesのfavicon (256 by 92 pixels, 4.79KB)

4. アンチエイリアスをかけても、白地にロゴ、みたいなデザインの場合、完全なホワイト（#ffffff）部分だけを透明にすると濃い色のタブ上ではゴミが発生する。

Dellのfavicon (256 by 92 pixels, 4.75KB)

5. 最近のブラウザはちゃんとアルファチャンネルつきのWindows icon形式を理解してくれる。なので、半透明も指定できる。ただ、半透明はうまく使わないと、背景色によってはかなり見えにくくなる。

Googleのfavicon (256 by 92 pixels, 4.78KB)

6. じゃあどうすればいいのさ、という質問に答えるために、3つ例を紹介する。まず、もともとのロゴがどんな背景色でもうまく見えるようにデザインされている場合は、ロゴの周りを透明にする。アンチエイリアスをかけるため、アルファチャンネルつきのWindows icon形式を使う。

Windowsのfavicon (256 by 92 pixels, 4.72KB)

もともとのロゴが白地を想定している場合は、ロゴ周りを透明ではなく白にするとよい。

イー・モバイルのfavicon (256 by 92 pixels, 4.57KB)

場合によっては、アルファチャンネルをロゴ周りの白い部分に適用し、タブが白以外の背景色だった場合は白い部分が角丸に見えるようにするのもよい。背景色が白だった場合は、角丸じゃなくただの白い背景になる。

Amazonのfavicon (256 by 92 pixels, 4.47KB)

なお、faviconをちょっといじってアップロードしても、キャッシュが残ってしまいブラウザ上では変わらない場合も多々ある。そのときは上述のとおり、favicon本体を見にいってリロードすればよい。

ADP: Web Designアーカイブ

ナビゲーション