トップHTML & CSS > faviconを設定する

faviconを設定する

1.faviconとは

favicon(ファブアイコン、ファビコン)とはFavorite icon (フェイバリット・アイコン/お気に入りアイコン)の略である。

ホームページにfaviconを設定していないときの IE 10.0とFirefox 20.0の画面コピーを下に示す。

これに対して、faviconを設定したときのIE 10.0とFirefox 20.0の画面コピーを下に示す。 IE 10.0ではURLとタブの先頭に登録したアイコンが表示されている。 Firefox 20.0ではタブの先頭に登録したアイコンが表示されている。

2.faviconの設定

アイコン画像のファイル形式はブラウザによっては ico 以外でもいいが、 ico形式としておくのが無難である。 表示される画像のサイズは 16×16 であるが、デスクトップにショートカットを登録した場合、 画像サイズは 32×32 となることから、マルチアイコンファイルとしておくのがベストである。 単独アイコンファイルの場合、ブラウザが適宜拡大縮小して表示する。

例えば、フリーソフトのアイコン変換ツールを使えば、 複数のアイコンを一つのアイコンファイルにまとめることができる。

自前サーバの場合、favicon.ico をルートディレクトリに置くだけでよいが、 ファイル名を変えたり、サーバーのサブディレクトリが個人のホームページのトップであるような場合には、 次のような記述をHTMLページのヘッダ部におけばよい。

<link rel="shortcut icon" href="パス名">

例えば、本ホームページの index.html は

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<link rel="shortcut icon" href="favicon.ico">
<title>Hatada's Home Page</title>
</head>
<frameset cols="13%,*" border="1">
  <frame src="toc.html" id="toc" name="toc" scrolling="auto">
  <frame src="main.html" id="main" name="main">
</frameset>
</html> 
とすればよい。但し、ファビコンファイル名は favicon.ico で、ファイルは index.html と同様に本ホームページのトップディレクトリに置くものとする。

個人のホームページの場合、現状では、ファビコンを設定していないケースが多いので、 本ホームページも動作確認後、設定を解除した。

なお、設定や解除は直ぐに反映されるとは限らず、多少時間がかかることがある。 また、キャッシュされたファイルを削除しておく必要がある。

3.faviconを取得する

WWWページのファビコンを取得するのは簡単である。 通常はサイトのルートの favicon.ico である。 例えば、GoogleのホームページのURLは "https://www.google.co.jp/" であり、 ファビコンのURLは "https://www.google.co.jp/favicon.ico" である。

これで得られない場合には、ページのソースを開いて shortcut で検索すれば見つかる。 例えば gmailの場合、トップページのソースから <link rel="shortcut icon" href="/mail/images/favicon.ico" type="image/x-icon"> が見つかるので、ファビコンのURLは "https://www.google.co.jp/mail/images/favicon.ico" であることが分かる。

ダウンロードはブラウザまたは wgetコマンドを使う。