20121118

兵ちゃん


ホームページのアイコン、ファビコンの作成について

兵ちゃんの研究室へ戻る

 パソコンをインターネットに接続してホームページを見るとアドレスやタグにカラフルなアイコンが表示されている事があります。このアイコンは、「faviconファビコン)」と呼ばれるアイコンです。そこで今回は、ファビコンの作り方について紹介したいと思います。



1.ファビコンとは

 ファビコンの具体的な例はインターネットエクスプローラーで図示すると次のようになります。一般的に色んなカラフルなファビコンが使われています。サイトの顔となるマークがファビコンだと言えます。






2.ファビコンのデータ

 ファビコンのファイルのデーターは、サイズの異なる絵のデータ、ビットマップが4枚から構成されています。表示箇所やMS Windowsの設定により見やすいサイズのデータが使われるように考えられています。ファビコンは、データとしてソフトやショートカット等に使われているアイコンと同じ物となりますが、64×6432×3224×2416×16のデータで一つのファイルを構成しています。



単位は、ピクセル又はドット



3.静止画の作成について

 ファビコンの作成は、まずは、静止画を選ぶ事から始めます。ドローソフトや3Dソフトでロゴとしてデザインし静止画(ビットマップ)にするか、デジカメの写真からでも作ることができます。どちらの静止画でも背景を透明化させる事も出来ます。どちらかと言うと中心となる物の他の背景部分は透明化させておいた方が見栄えが良くなると思います。フォトレタッチソフト又はペイントソフトで正方形で選択してコピーをして新たにイメージファイルとして貼り付け透明化の処理をさせた後にで一枚の正方形の絵にします。その後ファビコンで使うサイズの64×64のサイズに縮小させて透過の情報を保存できる.gif形式でファイルとして保存します。


1

3Dのロゴ作成用のソフトを使い「兵ちゃん」の「兵」の字をレンダリングして一枚の静止画を作りました。




2

形を揃えるためにフォトレタッチソフト上で正方形の形で選択して貼り付けて新規の静止画とします。



3

背景を切り取り透過処理をします。それと、静止画のサイズを64×64ドット(ピクセル)に変更します。次に透過の情報を保存できるファイル形式の.gif形式でファイルとして保存します。ここまで来たら一段落です。





4.X-Icon Editorを使う

 ファビコンを作る無料のオンラインソフトの「X-Icon Editor」を使い「favicon.ico」というファイルを作ります。作り方は次の通りです。


1



先に準備した静止画のファイルです。デスクトップに置きました。

2



インターネットエクスプローラでX-Icon Editor URL http://www.xiconeditor.com/

にアクセスする。次に[Impot]ボタンをクリックする。

3



[Upload]をクリックする。

4



先ほどの静止画のファイルを選択して[開く]をクリックする。

5



4つのファイルサイズが読み込まれたら[OK]をクリックする。

6



読み込まれる。この時点でドット単位で編集する事もできますがあまりお勧めはしません。次に[Export]をクリックする。

7



[Export your icon]をクリックする。

8



ダウンロードが始まる。[保存をクイック]して[名前を付けて保存]をクリックする。

9



任意の場所に保存してください。今回はデスクトップに保存します。[保存]をクリックする。

10



favicon.ico」というファイルが保存される。ここまででファイルは完成です。



5.HTMLの設定

 ファビコンのファイルをそのままホームページのサイトに転送しても使えませんのでホームページのファイルであるHTMLファイルに使えるように記述を追加する必要があります。記述は次のようになります。</TITLE></head>の間に<link rel="shortcut icon" href="favicon.ico"/>の記述を追加します。HTMLソースの記述の例は次のようになります。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<HTML>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

<meta name="GENERATOR" content="JustSystems Homepage Builder Version 18.0.3.0 for Windows">

<meta http-equiv="Content-Style-Type" content="text/css">

<meta name="Description" content="兵ちゃんタウン入り口">

<meta name="Keywords" content="兵ちゃん,兵ちゃんタウン,へいちゃん">

<TITLE>兵ちゃんタウン</TITLE>

<link rel="shortcut icon" href="favicon.ico"/>  この位置に記述を追加する。

</head>

<body bgcolor="#cccccc" background="WALL_D19.GIF">

<P align="center"><a href="http://heicyann.com/townmap.html"><img src="hei_rog1.gif" width="320" height="240" border="0" alt="兵ちゃん"></a></P>

<MAP name="hei_rog 1">

<AREA href="townmap.html" shape="rect" coords="3,7,324,239">

<AREA shape="default" nohref>

</MAP><marquee behavior="SCROLL|SLIDE|ALTERNATE" bgcolor="#ffffff" style="background-color : transparent;">

<P>兵ちゃんタウンへようこそ!

</marquee>

<CENTER><img src="/kantan-cgi/counter.pl?id=jsTN6WPU"></CENTER>

</body>

</HTML>




6.実際の表示

 ファビコンの設定ができた状態は次のようになります。






7.表示されなかった時の処置

 ファビコンが表示されなかった場合は、キャッシュを削除します。それとホームページを右クリックして「最新の情報に更新」をクリックします。何回か行うと表示されるようです。


1



インターネットエクスプローラの右はじの歯車のボタン「ツール」をクリックする。

2



「インターネットオプション」をクリックする。

3



「閲覧の履歴」の[削除]をクリックして読み込んでいる一時ファイルを削除する。

4



一番上の「お気に入りwebサイトデータを保持する」のチェックを外す。

続いて[削除]ボタンをクリックする。

5



[OK]ボタンをクリックして閉じる。

6



削除が完了するとインターネットエクスプローラの下側にメッセージが表示される。



8.考察

 ファビコンは、Microsoft Internet Explorer (インターネットエクスプローラ)というブラウザ用に始めは作られたのでマイクロソフト規格です。Microsoft Internet Explorer 5から対応しているそうです。なので他社製のブラウザで表示されるか疑問の余地があるそうですが今では一般化してホームページの顔のようになり一般的に浸透してきています。意外と作り方は知られていないようです。あと、HTMLソースの記述の方法が何種類か有り一番簡単な記述が今回のレポートの記述になります。





 今回は、ファビコンの作り方でしたが・・これであなたのホームページのレベルが向上するのは間違いないと思われます。内容も簡単だったのではないでしょうか・・・ぜひファビコンを使ってください。ホームページを作る時の参考になれば幸いです。





参考URL

MSDN サイトのアイコンをカスタマイズする  URL http://msdn.microsoft.com/ja-jp/library/gg491740(VS.85).aspx

X-Icon Editor URL http://www.xiconeditor.com/

色々

1