ファビコンとは

ファビコンとは「Favorite Icon」の略で、アドレスバーの左横に表示される小さなアイコンのこと。

ファビコンの画像サイズは16×16ピクセルである。


ファビコンの作成方法

ファイルはGIFやPNG形式作成し、FavIcon from Picsなどのサービスでico形式に変換する。

FavIcon from Pics -- free favicon.ico for your website (animated, static and marquee icons)

ファビコンの作成

１．ペイントを起動し、「変形」→「キャンパスの色とサイズ」の順で選択する。
ペイントを起動し、「変形」→「キャンパスの色とサイズ」の順で選択する。

２.幅と高さを16ピクセルに設定する。
幅と高さを16ピクセルに設定する。

３.「表示」→「拡大」→「カスタム」→「800％」を選択します。
「表示」→「拡大」→「カスタム」→「800％」を選択します。

４．「表示」→「拡大」→「グリッドを表示」を選択します。
「表示」→「拡大」→「グリッドを表示」を選択します。

５．次のように表示されるので、test.gifのようにgif形式で保存して、「鉛筆」や「塗りつぶし」などのツールを使ってファビコンのデザインを開始します。完成したら最初に付けた名前で上書き保存を行います。
次のように表示されるので、test.gifのようにgif形式で保存して、「鉛筆」や「塗りつぶし」などのツールを使ってファビコンのデザインを開始します。完成したら最初に付けた名前で上書き保存を行います。
完成例

６. FavIcon from Picsにアクセスして、
Source Image :元になる画像の保存先を指定
Scrolling Text (optional) :文字を表示したいときに指定
Animate Favicon : アニメーションＧＩＦの設定
Generate FavIcon.ico
設定が完了したら、Generate FavIcon.icoをクリックします。

７．Download FavIconをクリックします。zipファイルの保存先を指定して保存します。
Download FavIconをクリックします。zipファイルの保存先を指定して保存します。

８．７で出来たファイルを解凍してファビコンを設定します。

ファビコンのlinkタグの書き方

<link rel="shortcut icon"  href="favicon.ico" />を<head>～</head>に記述します。hrefの部分はfavicon.icoの保存先を指定して下さい。

テクニカルエンジニアデータベースの過去問題のホームページへ inserted by FC2 system