|
HTMLタグ > ファビコン( お気に入りアイコン ) の作成・設置方法
|
ファビコンとは、ブラウザのお気に入りバーやアドレスバーに表示される小さなアイコンのことです。
お気に入りアイコンなどとも呼ばれます。
ブラウザによっては対応していないものもあり、ファビコンというもの自体が不安定なんだそうです。
それでも作ってみようかなという方へ、設置方法の1例を紹介します。
管理者の使用・確認ブラウザは、Internet Exploler6.0、Sleipnir2.6です。
一度は設置までがんばったけど、私がメインで使っているSleipnirでは下層のページ全部が同じファビコンになってしまうのが許せなくてやめました(ノ_<。)
下層を使って別サイトがいくつかあるので…。
1) ペイントツールなどで6×16ピクセル以上128×128ピクセル以内の画像を作り、bmp形式で保存します。
透過したい部分がある場合、その部分は他に使っていない色で塗りつぶしておきます。
※16×16ピクセルに圧縮して表示されるため、できるだけ小さく、シンプルなデザインの方がよいです。
複雑なデザインだと、潰れてよくわからなくなってしまいます。
圧縮されない状態で表示させたい場合は、初めから16×16ピクセルの画像を作ります。
2) 変換ツールを使って、ico形式へ変換します。
※透過する部分がなければ、Favicon Japanの変換ツールで変換できます。
※透過する部分がある場合は、@icon変換というフリーソフトがお薦めです。
>>>@icon変換での変換のしかた
1.@icon変換でダウンロードします。
2.「ファイル」>「素材を開く」でファイルを開きます。
ファイルをウィンドウにドラッグしてもOK。
3.ファイルをクリックし、選択した状態にします。
4.※透過する部分がない場合は、ここは不要です。
「透過マスクの編集」で透明マスクの編集画面を開きます。
スポイトツールで透過したい部分をクリックします。( 網目状になります。)
「OK」で前の画面に戻ります。
5.「ファイル」>「単独iconとして保存」でファイル名と保存場所を指定して保存します。
※推奨ファイル名はfavicon.ico。
3) ファビコンを設置したいサイトのいちばん上の階層 (通常トップページの階層 ) に、ファイルをアップロードします。
4) ファビコンを設置したいhtmlファイルのどれかひとつ ( 通常トップページ ) の
</title>〜</head>
に、以下のタグを追加します。
<link rel="shortcut icon" href="favicon.ico">
これで完了です。
Q & A
Q. 設置したファビコンが表示されません。
A. ブラウザによっては対応していないものもあります。
反映されるまでに時間がかかることがあります。( 数時間〜数日？)
上記の<link〜>タグの前に、以下のタグを追加することで解決することもあります。
<script language="JavaScript">
image = new Image();
image.src="favicon.ico";
</script>
Q.動きのあるファビコンは作れますか？
A. GIFアニメを〜.icoというファイル名にし、同じように設置すればアニメのファビコンを表示することができます。
ただしこれは対応しているブラウザは少なそうです。
( WinのIE6.0、Sleipnir2.6は未対応 )
Q. ファビコンを新しく変えたいのですが、新しいものをアップロードしても古いものから表示が変わりません。
A. IEなら「ツール」>「インターネットオプション」>「一時ファイルの削除」をしてから、再度お気に入りに登録して下さい。
Sleipnirなら「ツール」>「Sleipnirオプション」>「クライアント」>「終了」>「Favicon のキャッシュ」にチェックを入れ、ブラウザを一度終了させ、再度起動すれば新しいファビコンが表示されます。
Q. ファビコンのファイル名はfavicon.ico以外でもいいのですか？
A. IEなら、<link〜>タグでそのファイル名を指定すれば問題ありません。
Sleipnirは、favicon.ico以外のファイル名では表示されません。
Sleipnirは、favicon.icoというファイル名を探して、それと同じ階層とそれ以下のページに表示する仕組みになっているようです。
Q. ファビコンを置いた階層より下の階層のページに、別のファビコンを設置することはできますか？
A. IEならできます。
ただし、全ページに<link〜>タグ追加が必要です。
タグがないページは上の階層のファビコンが表示されます。
Sleipnirではできません。
Q. 同じ階層で、一部のページだけ別のファビコンを設置することはできますか？
A. IEでは、<link〜>タグで別のファビコン名を指定すれば可能です。
Sleipnirではできません。
「HTMLタグ」のトップに戻る
|
|
|
