ヴォルフロッシュ

Blog

Published on

RSS

favicon.ico

ついに設置しちゃいました、favicon.ico。いわゆる "ショートカットアイコン" ってヤツ。比較的最近導入されたシステムで、Win用IEのお気に入りリストやMozilla系やOperaのタブに表示されたりする、非常に小さなサイトロゴアイコンです。Win用IEでうちのサイトをすでにお気に入りに入れてる人(希有)はヴォルフロをお気に入りに入れ直すとアイコンがひっついてウマーかもしれない。

元々は、またMSIEの独自拡張かよ!と嫌っていたのですが、Mozilla(Netscape)さんやOperaさん達が導入し始めたので、こりゃ黙っちゃおれんな、と(単純)。ってかMozollaやOperaが導入したのには驚いた。無視できなくなってきたということか。でも屈辱じゃないのか?だって「favicon」ですよ。「favorite + icon」。MozillaもOperaも「ブックマーク」です。まぁせめてもの救いが、metaタグに書くリンクタイプは「shortcut icon」という名称だということでしょうか。「favicon」は空くまでもデフォルトというかよく使われている名称で、その気になれば「bookmark.ico」とかも可能だと。そこまで頑固にはなれないけど。全部のHTMLファイルにmeta埋め込むの大変だし。

さて、このfavicon.ico、流石MS発祥のシステム。この「.ico」という拡張子はWindows用のiconファイルの拡張子です。つまりMacにはこんなものはないのです。「Mac → Win」への変換はたやすいのに、「Win → Mac」への変換は容易ではないこの世の中(これもゲイツがWindowsのシェアを拡大させるため)、生粋の腐れマカーなこの私がこのfavicon.icoを作るのは、アイコン系を作り慣れているアイコン作家ならともかく、一筋縄でいくことじゃあございません。Windows用のiconファイルを作るがために、以下のようなとても大変な手順を踏んでおります。

  1. ImageReadyでアイコン画像を作る。
  2. 「Control+Command+4」で作ったアイコン画像のスクリーンショットを撮る。
  3. スクリーンショットをSimple Textで開いて「選択 → コピー」。
  4. ここで、新たにアイコン用ソフトIcon Machineをダウンロード。
  5. Icon Machineで新規アイコンを作り、先ほどのコピーをペーストする。
  6. マスクを調節。
  7. アイコンとして書き出す。
  8. 今まで使っていたFinder Iconというプラグインをクリエータ仕様にヴァージョンアップ。
  9. Finder Iconを使って、書き出したMac用アイコンをWindows用に変換する。
  10. やっとでき上がり。

です。もちろん途中には四苦八苦があり、DLしてみたけどうまく使えなかったソフトとかもありました。ローカルではちゃんと表示されるのにサーバに上げると表示が変になったりとか。そもそもアイコン制作の知識がかじったくらいにしかないので、アイコンを作るだけで苦労した。もしショートカットアイコンの形式が.icoじゃなくて只のGIFとかPNGだったらどんなに楽なことか…(ためしにgifでやってみたら一応表示はされたんだけどね)。一応全てフリーウェア、またはシェアウェアの体験版で作っております。もしMacユーザでfavicon.icoを作りたい人がいたらご参考に。多分もっと楽な方法もあるのでしょうが、その辺は自分で研究してください。多分、直接ResEditでアイコン制作→Finder Iconで書き出しが一番はやい。

今回作ったヴォルフロのショートカットアイコン、極小と化してますが一応ベンジャミンです。サイトフレームの左下にあるのと同じ写真。このアイコンがベンジャミンだとは言われないと識別はできないかもしれないけど、1pxの角丸枠に水色と黒の写真っぽい配色は十分にヴォルフロらしさを醸し出してる様に思えたので、これで実行にしました。ドット打ちはさすがにできないし。こういう時のためにいわゆるサイトのマークを作っておきたかったのですが、いかんせん「Wolfrosch」一単語で、このサイトレイアウトだと作りにくい。だから最初サイト名2単語で考えてたんだよねぇ。写真とかって縮小すると識別できなくなるし。今ベンジャミンがいる左下のスペースも、最初はサイトマークが入る予定だったのです(ヴォルフロ制作秘話)

で、ここまで作っておいてなんなのですが、ショートカットアイコンってどうなんでしょう? いや、真面目な話。私は美しくないと思うのです。ChimeraやOpera、Mac版IEだってURLのマーク、つまりデフォルトのショートカットアイコンにはそれなりに気を遣ってブラウザと統一感を保とうとしています。それを崩すようなショートカットアイコンは必要なのだろうか? 近頃はMacでブラウジングしていてもショートカットアイコンは簡単に見られるようになったので、今回ヴォルフロ用のを作る参考にも、色々なサイトのショートカットアイコンを見て回りました。大手でも、例えばGooleとか東芝EMIとか2ちゃんねるとか、ショートカットアイコンが設定してありましたが、どうみても美しくない。原色の赤や黄色、無理矢理詰め込んだ文字を平気で使ってる。そりゃ16x16ピクセルというとても小さなフィールドの中でそのサイトを表す見やすいアイコンを作るのは難しいことです。別にショートカットアイコンというシステムが悪いのではなく、それを作った人のセンスが悪いのかもしれない。けど、…ねぇ。デフォルトのアイコンは16x16より小さめなのが多いから大きさのバランスも悪いし。あ、タブに表示される分には、可愛くていいと思います。だからショートカットアイコンの全てを否定するワケじゃないんだけど。個性でて可愛いとも思うし。現にヴォルフロにだって設定したわけですし。

あ、さすがにAppleのショートカットアイコンはシンプルで良かったです。でもあれ、白とグレー逆転してた方が私は好きだなあ。それだったらカンペキ。なんで白抜きなんだろう? てかAppleは、ショートカットアイコン作ってる暇があったらAppleのサイトバナーを作って欲しい。未だにないのかよ。

ともあれ、これでまた一歩俺サイトっぽくなりました。あと "アレ" があると更にっぽくなるのですが、こっちはfavicon以上に苦戦しております。もしかしたらできないかもしれない。できたら報告するね。

Comment

この記事へのコメント受付は終了しました。