XHTML/CSS・トップ | 付録・目次

●オリジナルお気に入りアイコンの作り方

 お気に入りアイコンは、ブックマークアイコン、ファビコン(favicon)とも呼ばれ、訪れたWebページを表示したときにアドレスバーの左端、またはお気に入りとして登録した際にお気に入りリストの左端に表示される小さいアイコンのことです。お気に入りアイコンの作り方を解説しているサイトは多いですが、お気に入りアイコンを指定するときに使われる link要素の type属性の値としてMIMEタイプを指定する方法を解説しているサイトがほとんどないので当サイトでも取り上げてみます。

 ホームページ作成ソフトなどで作ったお気に入り用のアイコンを任意のディレクトリにアップロードします。アップロードせずに任意のディレクトリにアイコンを保存しても構いません。ですが、手元のパソコン上で作成したアイコンはそのままではお気に入りアイコンとして表示されません。お気に入りアイコンを指定したWebページをサーバにアップロードさせないと通常、アイコンが表示されませんのでご注意ください。ここでは便宜上、最初にPNGファイルで作るお気に入りアイコンの作り方で解説します。

 PNGファイルの作り方はいろいろあると思いますが、ホームページ作成ソフトのツールがPNGファイルに対応している場合はそれで作り、PNGファイルが作れない場合はまず、ほかの画像形式でお気に入りアイコンを作り、“ペイント”などの画像作成・編集ソフトを使って、「名前を付けて保存する」からファイルの種類を選択することにより、PNGファイルに変換できます。また、PNGファイルのお気に入りアイコンのサイズは16×16サイズが適しているようです。お気に入りアイコンができましたら任意のディレクトリにアップロード、または保存しておきます。

 さて、Webページからお気に入りアイコンを指定するには、 link要素を使います。XHTML(HTML)文書の<head>〜</head>間に次のような link要素を指定します。指定方法は、http://〜のURL指定でも相対パスによる指定のどちらでも構いません。

【XHTML】↓

<link rel="shortcut icon" type="image/png" href="http://〜のURL指定または相対パスを指定" />

【HTML】↓

<link rel="shortcut icon" type="image/png" href="http://〜のURL指定または相対パスを指定">

【実践例】(ここのWebページで指定している方法)↓

<link rel="shortcut icon" type="image/png" href="http://www.xml.vc/pandora/favicon/graphic/xml-css.png" />

 ところで、お気に入りアイコンの画像形式にPNGファイルを指定するとNetscape (v7.1)、Firefox(v2.0)、Opera(v9.1)などのメジャーブラウザでは“ブックマークアイコン”として表示されますが、ウィンドウズ版IEではお気に入りアイコンが表示されません。ですので、通常はお気に入りアイコンとして使用するファイルの画像形式は ico(ピリオドを含めた拡張子は".ico")ファイルを利用すると良いでしょう。

 念のため、書き添えますとウィンドウズ版IE以外のメジャーブラウザでは“お気に入り”のことをブックマークと呼んでいます。また、PNG形式はGIF形式に比べて、ファイルの圧縮率が高い割りに画質が劣化しないのが特徴。Webの標準化団体W3Cによって推奨されています。

 お気に入りアイコンはそのほかの画像形式でも基本的には作れます。あとは多くのメジャーブラウザが対応しているか否か、古いブラウザが対応しているか否かの違いです。ちなみにウィンドウズ版IEはv5.0以上でお気に入りアイコンに対応しています。

 icoファイルのファビコン用の画像ファイルを作成するにはまずファビコンで使用する画像ファイルを作成します。画像形式は、GIFやJPEG、PNG形式などで保存しておきます。この場合のサイズは問いませんが、完成するファビコンファイル(favicon.ico)のサイズが32×32なのでそのくらいのサイズを用意したほうが良いかも知れません。

 次に 準備したファイル形式を ico形式に変換します。アイコン作成ソフトでも変換できると思いますが、ここでは以下の“FavIcon from Pics”サイトの変換サービスを利用します。(英語ですが)

 アクセスすると入力フィールドが2つありますが上の一行入力エリアを利用します。 "Image to Use"の横の一行入力エリアの横にある「参照」ボタンをクリックして、表示される画面の中から変換用の画像ファイルを選択します。選択が終わりましたら、すぐ下にある「Generate FavIcon.ico」ボタンをクリックします。

 次に、「Generate FavIcon.ico」ボタンの下に表示されているファビコンのサンプルで問題なければ“Download FavIcon Package”の文字列をクリックして、PC上の任意の場所にダウンロードさせます。その際、zip形式でダウンロードすることになりますので、解凍したフォルダの中から"favicon.ico"のファビコンファイルをサーバにアップロードします。(ファビコンのサイズはなんと32×32と16×16の2種類を作ってくれます。感謝!)

 最後に、ファビコンを指定するXHTML(HTML)文書の <head> 〜 </head>間に、link要素を設定してその文書をアップロードすれば完了です。

【XHTML】↓

<link rel="shortcut icon" type="image/x-icon" href="http://〜のURL指定または相対パスを指定" />

【HTML】↓

<link rel="shortcut icon" type="image/x-icon" href="http://〜のURL指定または相対パスを指定">

【実践例】↓

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

 "favicon.ico" は指定したディレクトリにあった場合のみ有効です。ブラウザによっては、同じディレクトリ内に該当するファイルがない場合には、その上位のディレクトリ、または、下位のディレクトリを順次 "favicon.ico" ファイルを探すと言われていますが、確認してみると実際には走査を行いません。しかしながら、ページごとに異なるお気に入りアイコンを配置することは可能です。>

 ここで解説するMIMEタイプとは、WebサーバとWebブラウザの間でやり取りされるデータ形式のことです。ブラウザが拡張子を付けたファイルをサポートしていない場合にMIME タイプを指定しないとブラウザはなんのファイルかわからずにファイルのダウンロードを開始します。MIMEタイプはそれを回避するために利用しますが、実際は思い通りにいかないブラウザもあるようです。一般的に、MIMEタイプが有効か否かはブラウザ、またはサーバに影響されます。なお、type属性で指定するMIMEタイプは必須ではありませんが、推奨属性ですので指定しておきましょう。MIMEタイプの代表的なものには以下のものがあります。

■参考

代表的なMIMEタイプ一覧
拡張子 MIMEタイプ 区別(簡略化)
bmp image/bmp 画像ファイル
eps application/postscript EPSファイル
(PSファイルの仲間)
gif image/gif 画像ファイル
ico image/x-icon 画像ファイル
jpeg,jpg image/jpeg 画像ファイル
pdf application/pdf PDFファイル
png image/png 画像ファイル
ps application/postscript PS(Post Script)ファイル
(Adobe社が開発した画像ファイル形式)
tif,tiff image/tiff Aldus社とMicrosoft社が開発した画像ファイル形式
css text/css cssファイル
htm,html text/html HTMLファイル
xhtml application/xhtml+xml XHTMLファイル
xml application/xml XMLファイル
cgi application/x-httpd-cgi cgi ファイル
js application/x-javascript
("text/javascript"のほうが無難)
js ファイル

 お気に入りアイコン、ファビコンファイルはブラウザのキャッシュに影響されます。具体的にはサイト作成者がお気に入りアイコンの画像を変更した際にユーザーがすでに登録したお気に入りアイコンに反映されるためにはユーザーが使っているブラウザのキャッシュを一度、削除して、再びお気に入りとして登録しないと反映されないことがあります。また、あなたがファビコンを作っている過程で最新のファビコンを反映させるためにはお使いのブラウザのキャッシュをクリアしてください。

※Key words:"favicon" "mimeタイプ 一覧"

2007年3月8日 作成
2011年7月3日 更新

XHTML/CSS・目次 | 付録・目次

Copyright (C) 2007 http://www.xml.vc