「favicon」を作ってみました

2007.02.04 00:38

サイトのデザインも少し前に変更したのに、何か足りないと思ったら、favicon（ファビコン）が無かった。
faviconっていうのは「favorite icon」の略で、ウェブブラウザのアドレスバーやブックマークの横に出てくる画像のこと。

ということで、今回はchocobitのfaviconを作ってみました。

作り方はアイコン作成ソフトを使うやり方もあるんですが、自分は使い慣れたPhotoshopを使って作成。
16×16ピクセルの新規ファイル（背景は透明）に適当（適切）に描画していく。

favicon作成1

1600%表示にして、1ピクセル鉛筆ツールを使って地道に作成。
チョコの大きさは上下左右に1ピクセル余白をとったので実際には14×14ピクセルで作成。
100%表示だと下のように見えます。

favicon作成2

ここで迷ったのは、アンチエイリアスをかけるかどうか。
この「アンチエイリアス」というのは、輪郭のギザギザの部分を滑らかにする処理のこと。
実際にやったのがこれ

分かりますか？ギザギザが滑らかになったの。

ただ、自分は前者のアンチエイリアスをかけてない方を選択しました。
名前がchocobitなんで、ギザギザの方がイメージ合うなと思っただけなんですがね。

そんなわけで、できた画像はPNGで保存。
これをfavicon.icoに変換してくれるサイトはいくつかあるのですが、うちはFavicon Japanさんを使用させてもらいました。

こいつをサイトに設置させるには<head>タグ内に

<link rel="shortcut icon" href="http://chocobit.com/favicon.ico">

というのを入れてやるのが普通なんですが、ルートディレクトリに放り込めば下位のディレクトリでも表示するので、うちではこの指定はしませんでした。いいよね。

Tag

Message