ファビコン（favicon）設置編：役割・作り方からHTMLでの正しい設定手順まで解説
ホームページを開設したら、デザインや文章の作成と合わせて設定しておきたいのが「ファビコン（favicon）」です。
ブラウザのタブやブックマーク一覧に表示される小さなアイコンですが、設定されているかどうかでサイトの印象や使いやすさは大きく変わります。今回は、ファビコンの重要性や具体的な作り方、HTMLへの記述とサーバーへの設置手順について分かりやすく解説します。
この記事のポイント
- 設置の重要性：ブラウザのタブや検索結果で見つけやすくなり、サイトの信頼性が向上する
- サイズと形式：PCブラウザ用の.ico形式とスマホ用の.png形式（180px）を用意するのが基本
- 設置の手順：サーバーのルート階層にアップロードし、HTMLのheadタグ内に記述する
画像をクリックで拡大表示します。
1. ファビコン（favicon）とは？設置するメリットと役割
ファビコン（favicon）とは、「Favorite icon（お気に入りアイコン）」を略した言葉で、ホームページのシンボルとしてブラウザ上に表示される小さなアイコン画像のことです。
普段インターネットを利用している際、ブラウザのタブの左端や、ブックマーク（お気に入り）一覧、検索結果の横などに表示されているサイトごとの小さなマークを目にしているはずです。これがファビコンです。
ファビコンを設置する主な役割とメリット
設定しなくてもホームページの閲覧自体に支障はありませんが、設置することで以下のような重要な効果があります。
- タブや履歴一覧での見つけやすさが向上する：
複数のタブを同時に開いて作業しているときでも、アイコンがあることで目的のページを一目で判別できるようになります。 - サイトの信頼性とブランドイメージが高まる：
初期状態の無機質なアイコンではなく、自社ロゴや独自のマークを表示させることで、丁寧に運営されている安心感を訪問者に与えます。 - スマートフォンのホーム画面追加に対応できる：
スマートフォンで「ホーム画面に追加」された際、アプリのアイコンのように綺麗に表示させることができます。
2. 押さえておきたいファビコンの画像サイズとファイル形式
ファビコンを用意する際は、表示される場所や端末に応じた「サイズ」と「拡張子（ファイル形式）」の選び方が重要になります。
代表的な2つのファイル形式（.ico と .png）
ファビコンで使用される形式は、主に以下の2種類です。
- ICO形式（.ico）：
古くから使われている標準的な形式です。1つのファイルの中に複数のサイズをまとめて格納できる（マルチアイコン）特徴があり、古いブラウザから最新環境まで幅広く対応できます。 - PNG形式（.png）：
背景を透明にしたデザインを綺麗に表現できる形式です。近年のモダンブラウザやスマートフォン向けのアイコンとして標準的に利用されています。
推奨される主な画像サイズ
端末やブラウザによって使われるサイズが異なるため、以下のサイズを用意しておくのが一般的です。
- 16px × 16px：ブラウザのタブやアドレスバーに小さく表示される標準サイズ
- 32px × 32px：高解像度ディスプレイ（Retinaディスプレイなど）で綺麗に表示させるためのサイズ
- 180px × 180px（Apple Touch Icon）：スマートフォンで「ホーム画面に追加」された際のアプリアイコン用サイズ
ファビコン画像の具体的な作り方
ファビコン画像を用意する方法は、主に以下の2パターンがあります。
- 方法1：既存のロゴ画像から変換ツールを使って作成する
すでに自社のロゴ画像（正方形・512px以上推奨）がある場合は、無料のファビコン一括変換ツールなどを利用して「favicon.ico」と「apple-touch-icon.png」を一括生成・ダウンロードするのが最も手軽です。 - 方法2：画像編集ソフトで自作・デザインする
ペイントソフトなどで正方形のキャンバス（512px × 512pxなど）を作成し、背景を透過させたシンプルなシンボルマークをデザインしてPNG形式で書き出します。
3. 【実践】HTMLヘッダーへの記述とサーバーへの設置手順
画像ファイルが用意できたら、実際にサーバーへアップロードし、HTMLファイルから読み込む設定を行います。
ステップ1：ファビコン画像をサーバーにアップロードする
作成したアイコンファイル（favicon.ico や apple-touch-icon.png など）を、ホームページのデータを保管しているサーバーにアップロードします。
一般的には、サイトの最も上の階層（ルートディレクトリ：index.htmlなどと同じ場所）に配置するのが基本です。
ステップ2：HTMLのheadタグ内にlinkタグを記述する
HTMLファイルのheadタグ（<head> から </head> の間）に、以下のように読み込み用のタグ（linkタグ）を記述します。
<!-- 標準的なファビコン（.ico形式）の指定 -->
<link rel="icon" href="/favicon.ico" sizes="any">
<!-- スマホ用ホーム画面アイコン（Apple Touch Icon）の指定 -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">ステップ3：ブラウザで表示と動作を確認する
ファイルをアップロードしてHTMLを更新したら、実際にブラウザで自社サイトにアクセスし、タブにアイコンが表示されているか確認します。
もし変更が反映されない場合は、ブラウザに古いキャッシュが残っている可能性が高いため、キャッシュをクリアするか、シークレットウィンドウで開き直して確認します。
4. まとめ：小さなアイコンでサイトの完成度と信頼感を高めよう
ファビコンはサイズこそ小さな画像ですが、訪問者に対してサイトの存在感を伝え、信頼性を高めるための大切な役割を持っています。
専用の変換ツールを活用すれば、専門的な知識がなくても短時間で必要な画像を用意し、設置することができます。
自社のシンボルマークやロゴを活かしたファビコンを正しく設定し、より完成度が高く使いやすいホームページづくりを目指してみてください。