オリジナルのファビコンを設定しよう

ファビコンというのはフェイバリットアイコンの略です。
つまりはお気に入りのアイコンと言うこと。
これをブラウザのアドレスバーやタブに表示させることができます。
当サイトのファビコンを以下に示します。
CoolWebWindowの頭文字『C』を象りました。
CoolWebWindowのファビコン
ブラウザによってファビコンを読み込むタイミングや表示される場所が異なるらしいですが、アドレスバーやタブ、お気に入り(ブックマーク)に、ファビコンが表示されます。

1.ファビコンを作る

まずはファビコンを作ります。
サイズは16px×16pxです。
Windows付属のペイントでも十分に描けます。
しかし、16px×16pxなので、作成は結構困難を極めます。ちまちま書いていきます。
どうしても無理!!って方は、フリー素材でファビコンを提供しているサイトはたくさんあるので、検索してみるとよいです。

2.画像の形式を変換する

先ほど、ペイント等で作成した画像を.gifや.jpgで保存します。
しかしながら、ファビコンは.gifや.jpgでは表示できません。
.icoとしなければなりません。
が、初心者にありがちですが、拡張子を.gif⇒.icoと変えただけでは画像の形式は変換されませんので注意です!!
専用のツールを使用します。
フリーソフトをダウンロードできたりしますが、ここはオンラインで作成してしまいましょう。
以下サイトにアクセス!
FAVICON JAPAN
http://www.favicon.jp/

このサイトのトップページにファビコンの自動作成ができますので、手順に従ってやってみてください。非常に簡単です。

追記:2007.2.17
Photoshopは.ico形式で保存できないのですが、プラグインをインストールすることで.ico形式で保存できます。つまり、photoshopで全てができる!
外国産なので、わかりにくいかもしれませんので、このプラグインを紹介している2xup.orgさまのblogを紹介します。
Photoshop で背景透過の美しい favicon (ファビコン) を作成する - 2xup.org

私のPhotoshopのバージョンは6なのですが、きちんと動作しました。

3.ファビコンを設定する

ファビコンを表示させたいhtmlファイルを開きます。
その~の間に以下ソースを挿入。
<link rel="shortcut icon" href="ファビコン画像(.ico)">
ファビコン画像(.ico)にファビコン画像が置いてある場所までのパスを書きます。
これで完了です!!


FAVICON JAPANのサイトでは、gif画像を.ico画像にするときにサイズが大きくても縮小もしてくれますので、普通に素材をどっかからとってきてもできます。
ただ、縮小するとどうしても汚くなるので、最初から16px×16pxのサイズのgif画像を.ico画像にするのがオススメです。
また、FAVICON JAPANは、ファビコン素材もありますから、是非のぞいて見てはいかがですか?


FAVICON JAPAN
http://www.favicon.jp/
投稿日:2006年6月10日

トラックバック歓迎です。以下URLにて登録をお願いいたします。

このエントリーのトラックバックURL:

↓↓↓トラックバックしてくださった方々↓↓↓
※トラックバックされても管理人がスパムと判断したものは公開されません。

top