Alternative Design Project

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本体を見にいってリロードすればよい。

デザインテンプレート1212

2007年12月14日 19:03 | | コメント(3) | トラックバック(0)

印刷用CSSの書き方(基本編)

2007年12月02日 09:12 | | コメント(4) | トラックバック(0)

フォームにCSS 2007

2007年10月26日 23:04 | | コメント(0) | トラックバック(0)

デザインテンプレート0710r

2007年10月14日 00:05 | | コメント(0) | トラックバック(0)

デザインテンプレート1006の説明

2007年10月09日 22:17 | | コメント(0) | トラックバック(0)

position:fixedと透過PNGで作るメニュー (2)

2007年10月06日 22:46 | | コメント(0) | トラックバック(0)

position:fixedと透過PNGで作るメニュー (1)

2007年10月06日 21:53 | | コメント(1) | トラックバック(0)

負のマージンとSafariの話

2007年10月04日 22:30 | | コメント(0) | トラックバック(0)

これからのCSS画像置換

2007年09月26日 21:41 | | コメント(1) | トラックバック(0)

ページの先頭へをposition:fixedで

2007年07月26日 23:50 | | コメント(0) | トラックバック(0)

「そこが知りたいInternet Explorer 7」の解法

2006年09月12日 21:56 | | コメント(2) | トラックバック(0)

マージンの相殺と背景

2006年09月09日 00:01 | | コメント(5) | トラックバック(0)

ピクセル単位で合わせるところではborderを使わない(IE7でも!)

2006年08月28日 01:57 | | コメント(0) | トラックバック(0)

左端をそろえるネタ

2005年02月27日 07:39 | | コメント(0) | トラックバック(0)

デザインテンプレート1124

2005年02月24日 13:22 | | コメント(4) | トラックバック(1)

フォームにCSSの話(旧版)の補足

2005年02月16日 02:27 | | コメント(0) | トラックバック(0)

検索フォームにCSS(旧版)

2005年02月15日 20:20 | | コメント(6) | トラックバック(0)

デザインテンプレート0208

2005年02月08日 20:57 | | コメント(4) | トラックバック(0)

iモード対応XHTMLとCSS

2004年12月28日 16:54 | | コメント(8) | トラックバック(0)

IE6の標準準拠モードとposition: absoluteと範囲選択

2004年12月27日 21:01 | | コメント(0) | トラックバック(0)

フロートとマージン

2004年12月09日 17:02 | | コメント(4) | トラックバック(0)

角を丸くしたいネタ (2)

2004年12月03日 18:17 | | コメント(4) | トラックバック(0)

角を丸くしたいネタ (1)

2004年12月01日 22:48 | | コメント(3) | トラックバック(1)

デザインテンプレート1110とネガティブマージン

2004年11月10日 16:26 | | コメント(11) | トラックバック(0)

デザインテンプレート0710

2004年11月04日 21:31 | | コメント(0) | トラックバック(0)

liで作るメニューとWindows IE5.0の話

2004年10月22日 21:15 | | コメント(3) | トラックバック(0)

Windows IE5のバグのメモ

2004年10月17日 21:15 | | コメント(1) | トラックバック(0)

div要素なしレイアウト (5)

2004年08月28日 22:14 | | コメント(4) | トラックバック(0)

div要素なしレイアウト (4)

2004年08月27日 05:24 | | コメント(0) | トラックバック(0)

div要素なしレイアウト (3)

2004年08月27日 05:15 | | コメント(0) | トラックバック(0)

div要素なしレイアウト (2)

2004年08月26日 14:05 | | コメント(1) | トラックバック(0)

div要素なしレイアウト (1)

2004年08月25日 13:14 | | コメント(10) | トラックバック(0)

line-heightを見直そう

2004年08月15日 22:51 | | コメント(0) | トラックバック(0)

本文のフォントサイズとカラー

2004年08月02日 13:12 | | コメント(2) | トラックバック(0)

IE6のwidth解釈バグ対処法

2004年07月20日 15:11 | | コメント(5) | トラックバック(8)

floatレイアウト補足

2004年07月10日 18:46 | | コメント(0) | トラックバック(0)

floatレイアウトおまけ

2004年07月10日 02:02 | | コメント(1) | トラックバック(0)

floatレイアウトでつまづかないためのTips

2004年07月09日 01:14 | | コメント(12) | トラックバック(2)

JIS X8341-3(ウェブコンテンツJIS)徹底攻略

2004年06月22日 20:27 | | コメント(1) | トラックバック(1)

ブラウザで見た目を調整するための最初のお約束

2004年05月22日 17:28 | | コメント(1) | トラックバック(0)

handheldメディア用CSSの作成(4)

2004年05月20日 14:39 | | コメント(0) | トラックバック(0)

handheldメディア用CSSの作成(3)

2004年05月13日 01:02 | | コメント(0) | トラックバック(0)

handheldメディア用CSSの作成(2)

2004年05月12日 15:14 | | コメント(2) | トラックバック(2)

handheldメディア用CSSの作成(1)

2004年05月11日 21:37 | | コメント(4) | トラックバック(2)

display: none

2004年05月06日 16:02 | | コメント(0) | トラックバック(0)

画像とSEO

2004年04月12日 14:14 | | コメント(0) | トラックバック(0)

XML宣言と標準準拠とバグと

2004年04月04日 11:30 | | コメント(0) | トラックバック(1)

ADPでのCSSロールオーバー

2004年04月03日 13:20 | | コメント(7) | トラックバック(1)

携帯対応も考えた画像表示

2004年03月27日 04:19 | | コメント(8) | トラックバック(0)

背景画像でタイトル

2004年02月26日 21:04 | | コメント(9) | トラックバック(0)

CSS利用のメリットについて概説

2004年02月23日 16:12 | | コメント(0) | トラックバック(0)

デザインテクニック開設

2004年02月06日 11:40 | | コメント(0) | トラックバック(0)

このページの先頭へ