BOOK Studio947
狩野祐東・狩野さやか著書
コラム

ファビコンを追加してみよう

HTMLドキュメントに含めることのできるメタデータは、検索エンジンのために記述するもの以外にもあります。有名なのはfavicon（ファビコン）でしょうか。Webサイトの作成が完了したら、faviconを作ってみましょう。

『スラスラわかるHTML&CSSのきほん』p.233

faviconとは

　faviconとは、Favorite Iconを略したもので、アドレスバーのURLの横に表示される小さなアイコン画像のことです。アドレスバーで使われるほかに、ブックマークの一覧や、その他いくつかの場所で使用されます。

アドレスバーのURLの横に表示されるfavicon
ファビコン

アドレスバーのURLの横に表示されているのがファビコン。IE9、10（Windows7、Windows8のデスクトップ画面）はタブのタイトルの横にも表示される。


ICOファイルの作成

　faviconを表示させるには、.ico形式のファイルを作成し、Webサーバーにアップロードする必要があります。
.ico形式のファイルは、GIMPやPhotoshopなどの画像編集ソフトで直接作れないことがあるため（ソフトによっては作れる場合もあります）、必要な画像ファイルを用意してから、オンラインのサービスなどで変換するのが便利です。事前の準備として、PNG形式、もしくはGIF形式の画像ファイルを用意しておきます。PNG、GIF形式の画像は、Windowsの場合「ペイント」アプリケーションで絵を描いて作成することもできます。画像編集ソフトで、16×16ピクセル（px）と、余力があれば32x32pxの画像を作成して、PNGまたはGIF形式で保存しておいてください。ファイル名は何でもかまいません。16x16pxの画像が必須です。

2種類の画像ファイルを用意する
faviconに使用する画像のサイズ

16x16pxの画像は必須。32x32pxの画像はオプション。


オンラインの.icoファイル作成サービスを使用する

　画像が用意できたら、そのファイルを.icoファイルに変換します。オンラインの変換サービスを使用するのが手軽で、いくつかのサイトが提供しています。

  1. favicon.icoを作ろう！──日本語。複数のファイルをアップロードして.icoファイルを作れます。
  2. favicon.cc──複数画像に非対応。16x16pxの画像をアップロードしてください。
  3. Favicon Generator──複数画像に非対応。16x16pxの画像をアップロードしてください。

できた.icoファイルをアップロードする

　.icoファイルができたら、Webサイトを公開しているWebサーバーにアップロードします。一般的にはルートディレクトリにアップロードしますが、ひとつのドメインで複数のサイトを運営しているような場合で、サイトごとにfaviconを変えたいときはルートディレクトリでなくてもかまいません。

HTMLを変更する

　.icoファイルをアップロードしたら、WebサイトのHTMLを変更します。<head>タグ内に、次のHTMLを追加します（ソースの5行目）。<head>内であれば順序は問いません。

<head>
<meta charset="UTF-8">
<!-- ルートディレクトリにfavicon.icoをアップロードした場合は以下ように -->
<!-- そうでない場合は、HTMLファイルからの相対パスを記します -->
<link rel="shortcut icon" href="/favicon.ico">
<title>ページのタイトル</title>
</head>

.icoファイル解説

　.icoファイルはもともと、マイクロソフトが提唱した画像形式で、ファビコンを作成するために作られました。複数の画像ファイルをひとつにまとめる機能があります。アドレスバーのURLの横に表示されるのは16x16pxの画像ですが、ブックマークなど別の場所では違うサイズを使用するブラウザもあります。Windows8のIE10（モダン画面）は、32x32pxのファビコンを使用します（ない場合は16x16pxを使う）。

　すべてのバージョンのIEを除き、Chrome、Firefox、Safariなどのブラウザは、.ico以外の形式の画像（JPEG、PNG、GIFファイル）でもファビコンとして表示できます。

　スマートフォンでは表示されなかったりするため、ファビコンは一時期ほど重要視されていないような印象があります。絶対に作らなければいけないようなものではありませんが、意外と見映えがするし、表示されると嬉しくなるので、試してみてはいかがでしょうか。

テスト用ファイル

　画像ファイルを作れない方のために、ファビコン作成練習用のファイルを用意しました。以下のfavicon.zipには、16x16px、32x32pxのPNG画像が含まれています。favicon.zipファイルをダウンロード、解凍してご使用ください。

こんな記事も

新着記事

著書一覧

Amazon.co.jpアソシエイト