以前からいくつかのサイトでブックマークに表示される favicon がでっかくて変だなーと思っていたのですが、原因(の一部?)がわかりました。
- 16 x 16 以上のサイズ( 64 x 64 とか)で画像を作成。(以下、元画像と呼ぶ)
- Telegraphics の ICO (Windows Icon) Format を使って favicon.ico を作成。
- アップロード!
タブのタイトル横に表示されるのは 16 x 16 に縮小されたものですが、ブックマークすると元画像のサイズの左上から 16 x 16 部分が表示されてしまう。
ブックマークにもちゃんと表示したいので、元画像を作成後 16 x 16 にリサイズして保存。それを favicon.ico に加工することで解決しましたヽ(・ω・)ノ
ブックマーク内で favicon の一部しか表示されていないサイトの favicon.ico を見比べてみたりしたら何かわかるかもと思ってやってみました。
- The Web KANZAKI The Web KANZAKI の favicon.ico (ICON 画像, 32×32 px)
- バリューコマース バリューコマースの favicon.ico (ICON 画像, 32×32 px)
- ログピ ログピの favicon.ico (GIF 画像, 16×16 px)
The Web KANZAKI
| ブラウザ | アドレスバー | タブ | ブックマーク |
|---|---|---|---|
| IE 7 Win | OK | OK | OK |
| Firefox 2.0.0.13 Win | OK | OK | 左上の一部 |
| Opera 9.27 Win | NO | NO | NO |
| Safari 3.1 Mac | OK | – | OK |
| Firefox 2.0.0.13 Mac | OK | OK | 左上の一部 |
| Opera 9.27 Mac | NO | NO | NO |
バリューコマース
| ブラウザ | アドレスバー | タブ | ブックマーク |
|---|---|---|---|
| IE 7 Win | OK | OK | OK |
| Firefox 2.0.0.13 Win | OK | OK | 左上の一部 |
| Opera 9.27 Win | OK | OK | OK |
| Safari 3.1 Mac | OK | – | OK |
| Firefox 2.0.0.13 Mac | OK | OK | 左上の一部 |
| Opera 9.27 Mac | OK | OK | OK |
ログピ
前に見たときは Firefox のブックマークで一部しか表示されていなかったけど直ってた!
| ブラウザ | アドレスバー | タブ | ブックマーク |
|---|---|---|---|
| IE 7 Win | NO | NO | NO |
| Firefox 2.0.0.13 Win | OK | OK | OK |
| Opera 9.27 Win | OK | OK | OK |
| Safari 3.1 Mac | OK | – | OK |
| Firefox 2.0.0.13 Mac | OK | OK | OK |
| Opera 9.27 Mac | OK | OK | OK |
p15.jp
参考までにここのやつも。
| ブラウザ | アドレスバー | タブ | ブックマーク |
|---|---|---|---|
| IE 7 Win | OK | OK | OK |
| Firefox 2.0.0.13 Win | OK | OK | OK |
| Opera 9.27 Win | OK | OK | OK |
| Safari 3.1 Mac | OK | – | OK |
| Firefox 2.0.0.13 Mac | OK | OK | OK |
| Opera 9.27 Mac | OK | OK | OK |
バラバラでよくわからん
ひとまずわかったことは、favicon.ico のサイズが 16 x 16 以上だと Firefox のブックマークでは 16 x 16 に縮小されずに欠けて表示されてしまうこと。
ちなみにここの favicon.ico は 16 x 16 だけど、Photoshop プラグインで作成しているからかダウンロードになってしまいました。
ルート直下に favicon.ico をアップロードしているだけですが、もしかしたらサーバの方で Apache の設定がされているのかも。
Favicon Japan!! -ファビコンの設置方法-
favicon の設置方法にもいろいろあるみたいですが、とりあえず今のところ主要なブラウザでは表示できているっぽいのでよしとする!