Home > ファビコンの作り方
ファビコンの作り方
ファビコンの作り方を紹介します。
画像ソフトでアイコン作成する
画像ソフト（Photoshop・Fireworks・GIMPなど）で作りたいアイコンを作ります。縦横の比率は1対1で作ります。
最終的には16px×16pxで表示されますので、その点を踏まえて作成します。
アイコンが出来たらそれをgif・jpg・pngなどで書き出します。
.icoへ変換する
次は、ツールを使って「.ico」の形式に変換します。
フリーソフトでは@icon変換 - 画像とアイコンの相互変換ツール。favicon作成にも。など、WEB上では、アイコン（icon）変換ツール - Favicon Converterなどがあります。他にも探すといろいろありますので自分にあったものを使って下さい。
HTMLにファビコンの設定をする
変換したアイコンをホームページがあるサーバーにアップロードします。そして、HTMLの<head></head>の中に以下を記述します。サーバーのルートにfavicon.icoという画像名で置いた時の例です。
<link rel="shortcut icon" href="/favicon.ico" >
こちらで完成です。
アニメーションさせる
基本的にはさきほどので終わりですが、アニメーションgifを設定することも出来ます。ちなみにIEでは表示されません。
アニメーションgifを設定する場合は、HTMLに以下のように記述します。
<llink rel="icon" type="image/gif" href="/favicon.gif" >
この方法を使えば「.ico」以外にもpngやただのgif画像も表示できます。typeはそれぞれの画像形式に変更して下さい。
ただしIEでは表示されないので、最初の「.ico」のものと合わせて書いておきましょう。
<link rel="shortcut icon" href="/favicon.ico" >
<llink rel="icon" type="image/gif" href="/favicon.gif" >