2008/2/11 月曜日

favicon のこと

カテゴリー: PC, インターネット — staki @ 17:45:38

IDEA*IDEA の記事でちょっと疑問に思った事が。

Faviconは普通の画像をicon形式に変換するだけでOKです。画像はPhotoshopなり、Paintなりで作ってください。GIFアニメもOKですよ。
IDEA*IDEA favicon.ico(ファビコン)の作り方

あれ?いつの間に ie ってアニgif 対応したの?ie 7 だとオッケーなのかな?と思ってちょっと調べたら・・・

Internet Explorer7(IE7)では画像の形式がiconファイルでないと表示されません。
しかしFireFox(FF)の場合アニメーションGIFで作成したファビコンにも対応しています。
Favicon Japan!!

ああやっぱり。ていうか、favicon の作り方とか言う記事あげてる IDEA * IDEA 自体も PNG で作ってるせいで手元の IE6 で表示されてないし。

元々 favicon 自体 Microsoft の独自拡張で、元々が ico 形式専門な訳で、結構無責任に png とか gif でもおkですよと言うサイトが多いせいで、多くの人が混乱してるんじゃないかなと思う。

って、これじゃ気持ち悪いので

ちょこっと検索。米国 Microsoft の MSDN より。

A shortcut icon for Internet Explorer must be square in size, and at least 16 x 16 pixels. Consider creating both a 16 x 16-pixel icon as well as a 32 x 32-pixel icon (and larger, bandwidth permitting), since on high-DPI displays, Internet Explorer may stretch the icon to fit the available space.

To create the icon, use an icon editor, such as the one included in Microsoft Visual Studio, and save the icon in the .ico file format. Internet Explorer will ignore icons that are not in .ico format, and will instead display the default Internet Explorer shortcut icon.
Creating Icons in the Correct Size and Format

# MS のサイトなので、ブラウザの言語の設定によって、勝手に変な所に飛ばされるかも。
面倒な人向けに超訳すると

IE のためのショートカットアイコンは、少なくとも 16×16 の正方形にしてください。より多くをサポートする為に 16×16 と 32×32 で作ってください。IE は、高い DPI での表示の時に、アイコンを大きく表示するかもしれませんので。

アイコン作るときはVisualStudioに入ってるアイコンエディタを使ってください。んでもって ico ファイル形式で保存してください。ie は ico ファイル形式で無い場合、デフォルトのアイコンを表示しちゃいます。

とのこと。「save the icon in the .ico file format.」って言ってるからには、アノ、bmpにデバイスカラー入った奴を複数格納できるっていうアノ正に ico なフォーマットなんだろう。16 だの 32 だの言ってるのもその辺りの話のはず。

なんでその辺まで引用するかって言うと、これにも訳がある。

複数のイメージを格納できるのがキモ

IE からドラッグアンドドロップでデスクトップに URL ショートカットを保存したり、お気に入りフォルダその物を覗いたりすると、この favicon がファイルアイコンとして表示される(firefox の設定から関連付けを行うと、この設定は無効になってしまう。)。

この時、Explorer で 32×32 の通常表示をしていれば・・・32×32 のイメージが格納された favicon の場合、そちらが優先して表示され、16×16 しか無い場合は汚く拡大されて表示される。んでもって「大きいアイコンを使う」をチェックしている状態であれば、48×48 が出てくる訳。

また、icon の表示は、デスクトップの表示色数にも影響される。16 色, 256 色, フルカラーと、それぞれマッチしたフォーマットの bmp が格納されていれば、それを優先して表示する。無い場合はテキトーな色で表示される。(Windows98 まではフルカラーはレジストリカスタマイズしないと表示できなかった記憶)(また、これはブラウザでも同じ状態になるかも。未確認。)

こう言う感じで『ブラウザのお気に入りのアイコン』以外の用途もある訳で、なおさらの事 ico 形式にしておくべきだと思う。誰だって一度は気に入ったサイトのショートカットをデスクトップに置いてみた事位あるはず。favicon 作るサイト管理者なら、そう言うときに綺麗なアイコン置いてみたいなって思うはず。

また、複数の画像サイズ、色数でイメージを格納できるので、Mac だの Linux だの Vista だの最近のデスクトップ環境でやりかねない 32×32  以上の画像も格納しておける。ちょっとSVG アイコンのように使える訳だ。

他にも、モバイル端末のブラウザが対応はじめる可能性だってあるわけで、携帯Operaならまだしも、i-modeブラウザ辺りなら、何も考えずにフルカラー入れたら一部化けちゃいましたっていう話だってありえる。

ちなみに、ico 形式には恐らくどのブラウザも真っ先に対応してくるであろう事も十分予想できるなんてったって天下のIEがそれしか食わんのだし。

長々と何が言いたいのかと言うと

少なくとも、『GIFアニメもOKですよ。』ってのはIEユーザーにとって、明白にウソな訳で、結構なページビュー持っていながら、人にレクチャーするときに原本の確認すらしないって一体どーなのかなあ。百式の管理人さんだし英語だって堪能だろうに ・・・。

こっちは Windows ユーザーだから検証しようがあるけど、相手が Linux ユーザーだったら Firefox で表示できる分、まんまと騙されてしまうと思うハズ。

という訳で、基本はRTFM!と言ういつものお約束なんだけど。

ていうこの人に限らず favicon の解説書いてる人の多くに当てはまるんだけど、この辺りの人達は CSS の話になると、途端に 1px に拘りだすのに、このいい加減さは一体何なんだろう???不思議だ。「favicon 作り方」で検索するとゴロゴロ出てくるね。

おまけ1

http://favicon.aruko.net/←のサービスとかも ico で複数形式格納してると、一番大きなサイズが出てきたりする。ウチのサーバーの favicon は 16 と 32 で図案が違うので、暇な人は試してみてどうぞ。
# つまり一般的な意味合いで、このサイトはウチのサイトの favicon を「取れていない」

おまけ2

ついでに、よく 『favicon がひょうじされませんー 』=>『キャッシュをクリアしてみてください』っていうFAQの流れがあるけど、IE7 では NTFS 使用時に限り、代替データストリームに favicon を格納するらしい。なので、このやりとりも、環境によってはウソ知識になってしまうというトリビア。この場合、ファイル削除>再ブクマと言う流れと思われる。インターネットショートカットなんてテキストファイルなんだし Base64 か何かで突っ込んでくれよって感じなんだけど。

あ、そうそう。IEコンポーネントブラウザの場合はまた話が別で、ナンボでも独自実装可能なので、ブラウザごとに一体何のフォーマットに対応しているのかは全く不明。

おまけ3

じゃあアニgif使っててIEでも見えるサイトは何なのさっていうと、meta タグで多重指定してるだけだと思う。ブラウザは対応してる方のフォーマットを読む。他所に腐るほど載ってるので省略。

1件のコメント

  1. Faviconギャラリーサイトのまとめ

    Favicon?って方は以前エントリーしたファビコン作成方法・ファビコンの埋め込み方をご覧下さい。 今回はFaviconのデザインにをまとめてくれているサイトさんを紹介したいと思います。…

    トラックバック by CSS Lecture — 2008/7/30 水曜日 @ 17:56:23

このコメント欄の RSS フィード

コメントフォームは現在閉鎖中です。

Powered by WordPress

stakilog