HTML 速習チュートリアル

HTML ファビコン (HTML Favicon)

ファビコンは、ブラウザのタブ内でページタイトルの横に表示される小さな画像です。

1. ファビコンとは

ファビコン（Favicon）は、ウェブサイトを視覚的に識別するためのアイコンです。通常、ブラウザのタブ、アドレスバー、ブックマークリスト、およびブラウザの履歴に表示されます。

2. HTMLにファビコンを追加する方法

ウェブサイトにファビコンを追加するには、まず作成した画像をウェブサーバーのルートディレクトリ（メインフォルダ）に保存するか、images のような専用フォルダに保存します。

ファビコンの画像ファイル名は、慣習的に favicon.ico とされることが多いです。

次に、HTMLファイルの <head> 要素内に <link> 要素を追加して、この画像へのパスを指定します。

<!DOCTYPE html>
<html>
<head>
  <title>マイ・ページ・タイトル</title>
  <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>

<h1>これは見出しです</h1>
<p>これは段落です。</p>

</body>
</html>

これで、ファイルを保存してブラウザでページを更新すると、ブラウザタブのページタイトルの左側にファビコンが表示されるようになります。

3. ファビコンのファイル形式のサポート

ファビコンとして使用できるファイル形式はいくつかあります。以下の表は、主要なブラウザでサポートされている形式をまとめたものです。

形式MIME タイプサポート状況
ICOimage/x-iconすべてのブラウザ
PNGimage/pngすべてのモダンブラウザ
GIFimage/gifすべてのモダンブラウザ
JPEGimage/jpegすべてのモダンブラウザ
SVGimage/svg+xmlすべてのモダンブラウザ
[!NOTE]
互換性を最大限に確保し、すべてのブラウザ（レガシーなものを含む）で正しく表示させるためには、.ico 形式を使用するのが最も安全な選択です。

4. まとめ

要素 / 属性説明
<link>外部リソース（ファビコンやスタイルシートなど）とドキュメントを接続します。
rel="icon"リンク先がアイコンであることを指定する属性。
typeファイルのMIMEタイプを指定します（例: image/x-icon）。
hrefファビコン画像ファイルへのパス。

ファビコンは非常に小さな要素ですが、ユーザーが多くのタブを開いている際にあなたのサイトを即座に見つける手助けとなります。プロフェッショナルなウェブサイト構築において、欠かすことのできない重要なステップです。