2006年07月20日
favicon.icoを作りました＆favicon.icoの作り方
なんだか、今日は当ブログのモバイル版を作って1日が終わってしまったので、ついでに久しぶりにfavicon.icoを勢いで作っちゃいました。。
favicon.icoとは、ブラウザのアドレスの左横に表示されるアイコンです。「お気に入り」に登録された時も、アイコンが表示されますので、「お気に入り」一覧の中で目立つことができます。
僕のWindowsマシンは不幸にも、今週、ハードディスクが壊れて使えないので、Macintoshでしか確認していませんが、けっこう良い感じですね。
Safariブラウザの場合はこんな感じです。（SafariはMacintoshのメインブラウザーです。）
Firefoxブラウザの場合はこんな感じです。
「お気に入り」に登録されると、一覧の中でもアイコンがあると目立ちますね。
Safariブラウザの「お気に入り」では、こんな感じです。
Firefoxブラウザの「お気に入り」では、こんな感じです。
favicon.icoを使っていないサイトに比べて目立つので、「お気に入り」からのアクセスが上がりそうですね。
作り方は簡単です！
僕の場合は、グラフィックソフトの「Photoshop」で作りました。
「Photoshop」はプロ向けの高価なソフトなので、無料で使えるものを探してみるのがいいと思います。
Vectorの「画像・グラフィック」カテゴリーにあるかもしれません。
もしくは、Windowsにデフォルトで入っている「ペイントソフト」でも作れると思います。
僕の場合は、「Photoshop」でまず、16×16ピクセルの大きさの画像を作りました。32×32で作る人もいるかもしれませんが、結局、アドレスバーで表示される時に縮小されてしまうので、画像がちょっと汚くなってしまいます。
なので、16×16で作った方がいいと思いますね。
favicon.icoを作る時のコツは、画像サイズが小さいのでなるべくシンプルにした方がいいですね。僕も最初は「next global jungle」の3つの単語の頭文字で「ngj」としましたが、小さすぎて可読性が悪いです。
なので、読ませるというよりも、「旗みたいな感じで見せる」というコンセプトの方がいいと思います。
そうすれば、思いっきりシンプルにできると思うので。僕も結局、「n」の一文字にしてしまいました。。
デザインが決まったら、今度はpng形式で保存しました。（gif、jpg、bmp形式などでもOKだと思います。これから使うfavicon.ico生成プログラム次第です。）
そして、「FavIcon from Pics」というfavicon.icoを作ってくれるサイトに行きます。
「Source Image」で保存した16×16ピクセルの画像を選択して、「Generate Favicon.ico」ボタンをクリックして「Download FavIcon」ボタンをクリックしてデスクトップにダウンロードすればfavicon.icoの生成は完成です。（ダウンロードしたフォルダの中から拡張子が「.ico」のものを探して下さい。）
英語がダメなら、「Favicon Japan!! -16×16の小宇宙ファビコン-」でも作れますよ。
でも、「FavIcon from Pics」だと、favicon.icoと一緒にgifアニメも作ってくれるので、どこかの場面で使えるかもしれません。
そして、できあがったfavicon.icoを任意に場所にアップロードして、あとはHTMLファイルの
リンクのパスを間違えないように気を付けて下さいね。
そして、そのHTMLファイルもアップロードすれば、ブラウザのアドレスバーと「お気に入り」の一覧にアイコンが表示されます。
もし、表示されなかったら、おそらくキャッシュが貯まっていると思うので、キャッシュをクリアしてみて下さい。
