はじめに

Webサイトを見ていると、ブラウザのタブやブックマークに小さなアイコンが表示されているのを見たことはありませんか？
それが「favicon（ファビコン）」です。
以前投稿したポートフォリオサイトのfaviconを設定したので記事にまとめてみました。

faviconについて

1. faviconって何？なぜ必要なの？

faviconは「favorite icon（お気に入りアイコン）」を略した言葉です。
(筆者も初めて知りました😮)

具体的には、以下のような場所で表示される小さなアイコンのことらしいです。
メリットも書いておきます。

ブラウザのタブ: 複数のタブを開いているときに、どのサイトか一目で分かります。
ブックマーク・お気に入り: 保存したサイトがアイコンで表示され、見つけやすくなります。
スマートフォンのホーム画面: Webサイトをホーム画面に追加したときに、アプリアイコンのように表示されます。

なぜfaviconが必要なの？

faviconはただの飾りではなく、Webサイトにとって重要な役割を持っています。

ブランディング: サイトのロゴやブランドイメージを伝え、プロフェッショナルな印象を与えられる。
視認性の向上: たくさんのタブやブックマークの中から、サイトを素早く見つけてもらえるようになる。
ユーザー体験の向上: ユーザーがサイトに愛着を持つきっかけになる。
信頼性: 設定をすることで、しっかりとしたWebサイトだと認識してもらえる。

2. faviconの「形」と「サイズ」

faviconにはいくつか種類があり、表示される場所によって最適な「形（ファイル形式）」や「サイズ」が異なります。

主なファイル形式

.ico: 昔から使われている形式で、Internet Explorerなど幅広いブラウザで安定して表示されます。複数のサイズを一つのファイルにまとめられます。
.png: 透明な背景（透過）に対応しており、高解像度で美しいアイコンが作れます。現代のWebサイトで広く使われています。
.svg: 拡大・縮小しても画像が粗くならない「ベクター画像」という形式です。これからの主流になるかもしれません。

デバイスとサイズ

faviconは、パソコンのブラウザだけでなく、スマートフォンやタブレットでも表示されます。
そのため、様々なデバイスに対応できるよう、複数のサイズのfaviconを用意することが大切です。

例えば、

一般的なブラウザ用: 16x16px, 32x32px
iPhone/iPadのホーム画面用 (Apple Touch Icon): 180x180px
Androidのホーム画面用 (Web App Manifest): 192x192px, 512x512px

など、多くのサイズに対応すると、どこでもきれいに表示されます。

3. faviconを作ってみよう

無料の「favicon生成サービス」を活用しよう

画像形式やサイズを変えて複数用意するのは大変です。
ですが必要なサイズのfaviconを一括で生成してくれる便利なサービスがあります。
自分は「RealFaviconGenerator」を使ってfaviconのファイルを作りました！

使い方はとても簡単！

PNG画像を1つ用意します。高解像度が良いと思います。
RealFaviconGeneratorのサイトにアクセスし、用意した画像をアップロードします。
サイトの指示に従って、必要に応じてプレビューを確認し、微調整を行います。
「Next」ボタンをクリックして、「Download」をクリック！
必要なfaviconファイルをまとめてダウンロードできます。

このサービスを使えば、自分で色々なサイズや形式のfaviconを用意する手間が省けるので、自分みたいに初心者の方には特におすすめです！

4. faviconをWebサイトに設定しよう

faviconの画像ファイルができたら、Webサイトに設定します。
WebサイトのHTMLファイルの<head>タグの中に、以下のコードを貼り付けます。
RealFaviconGeneratorでfaviconファイル生成すると生成したページにテンプレートがあります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Webサイトのタイトル</title>

    <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="manifest" href="/site.webmanifest" />
</head>
<body>
    <h1>ようこそ、私のWebサイトへ！</h1>
    <p>faviconが正しく表示されているか確認しましょう。</p>
</body>
</html>

site.webmanifestについて

site.webmanifest は、Webアプリ（PWA）の設定情報をまとめたJSONファイルです。
これを使うと、Webサイトをスマホのホーム画面に追加したり、ネイティブアプリのような見た目・挙動に近づけることができます。

{
  "name": "My Website",
  "short_name": "Website",
  "icons": [
    {
      "src": "/web-app-manifest-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "/web-app-manifest-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

ファイルの配置場所

作成したfaviconファイル（.ico, .png, .svg, .webmanifestなど）は、Webサイトの公開ディレクトリにアップロードしましょう。

例えば、index.htmlと同じ場所に favicon.ico や apple-touch-icon.png を置く形です。

NextjsやAstroなどのフレームワークを使ってる場合はpublicフォルダに置く形になると思います。

5. 設定後の確認と注意点

faviconを設定したら、必ず実際に表示されるか確認しましょう。

ブラウザのタブ: ちゃんと表示されていますか？
ブックマーク: ブックマークに追加してみて、アイコンが表示されるか確認しましょう。
スマホのホーム画面: スマホのブラウザでサイトを開き、「ホーム画面に追加」を試してみましょう。

「あれ？表示されないんだけど…」そんな時は

faviconは、ブラウザが一度読み込むと キャッシュ（一時保存） されることがあります。そのため、faviconを更新してもすぐに反映されない場合があります。

もし表示されない場合は、以下の方法を試してみてください。

スーパーリロード（強制再読み込み）:
- Windows: Ctrl + Shift + R または Ctrl + F5
- Mac: Cmd + Shift + R
ブラウザのキャッシュをクリアする: ブラウザの設定から「閲覧履歴データの削除」などでキャッシュをクリアする。
シークレットモード/プライベートブラウジングで開く: キャッシュが効かないモードで確認する。
ファイルのパスを確認する: HTMLに記述したファイルのパス（href属性の値）と、実際にファイルをアップロードした場所が合っているか再確認する。

まとめ

faviconはWebサイトの小さなアイコンですが、Webサイトの印象を大きく左右する大切な要素です。

ブランディングや視認性を高め、ユーザーにとって使いやすいサイトにするために不可欠な要素である。
RealFaviconGeneratorのようなツールを使えば、初心者でも簡単に必要なfaviconファイルを生成できる。
HTMLの<head>内にlinkタグで指定するとfaviconを設定できる。

参考

Discussion