前書き

本記事のゴール

この記事では、WebサイトのFavicon設定を効率的に行う方法を理解することを目指します。

この記事で解説する内容

Favicon設定について説明します
Webpackを使ってFavicon設定を簡単に行う方法について説明します

この記事で解説しない内容

Favicon画像の作成方法については説明しません

シリーズ記事

この記事はシリーズ 「ちょっとがんばるWebサイト開発 on Webpack5」 の記事です。
シリーズ全体の概要は以下のリンク先記事にまとめられています。

この記事では Webpack5 (version5.X.X) を対象としています。

背景知識

Faviconとは何か

Favicon とは、Webサイトに含まれるアイコンで、Webブラウザのページタブやブックマーク等で使用されています。Faviconを設定することで、ページ閲覧時やブックマーク保存時にその項目を目立たせることができます。

[参考] Favicon

Favicon (ファビコン) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN

[共通設定] Faviconをどのように設定するか？

一般に、WebサイトにおいてFaviconを表示させるためには、Faviconとして設定したい画像を準備した上で、Faviconを表示させたいHTMLページに適切な <link> タグ設定を行う必要があります。最も基本的な構成 を以下に示します。

<link rel="icon" href="/path/to/favicon.ico" type="image/x-icon">

ここで <link> タグの href 属性に記載したパス /path/to/favicon.ico にFavicon画像が含まれているとします。このように、HTMLの　<link> タグに rel="icon" を含む適切な設定を追加することで、外部リソースであるFavicon画像 /path/to/favicon.ico を読み込んでFaviconとして利用することができるようになります。上記 <link> タグで指定されている各属性の説明は以下の通りです。

link タグ rel 属性: 外部リソースとの関係性を示します
link タグ href 属性: リソースのURLを指定します
link タグ type 属性: リソースの種類を指定します

[参考] <link>タグ

<link>: 外部リソースへのリンク要素 - HTML: HyperText Markup Language | MDN #attr-rel

<link>: 外部リソースへのリンク要素 - HTML: HyperText Markup Language | MDN #attr-href

<link>: 外部リソースへのリンク要素 - HTML: HyperText Markup Language | MDN #attr-type

[個別設定] Faviconをどのように設定するか？

最も基本的な構成 を記述することで、WebサイトにおいてFaviconを利用することができるようになりますが、Faviconの利用場所はWebサイト上に限られません。例えば、スマートフォン（iPhone/Android）ではWebサイトのショートカットをホーム画面に追加するという機能がありますが、その際にホーム画面に表示するアイコンとしてFavicon画像を利用しています。

Webサイト上のFaviconの設定に関してはHTML5の仕様で定められているため、共通設定を記述することでほぼすべてのWebブラウザでFaviconを表示させることができます。一方で、標準化されていない独自仕様に則ってFavicon画像を利用するものに関しては、それぞれの環境に合わせた個別設定を追記する必要があります。

[参考] HTML5仕様 <link rel="icon">

HTML Standard - WHATWG

Webブラウザ等の環境に依存する設定に関しては、その独自仕様を調べた上で適切な設定を記述する必要があり、かなり面倒です。仕様を確認する際には以下のような網羅的な資料を利用すると良いと思います。

[参考] Favicon設定

How to Add a Favicon to your Site - QA @ W3C

Favicon - Wikipedia

この記事では、iOS Safari / Android Google-Chrome / Windows Microsoft-Edge用設定について簡潔に記載します。なお、詳細な説明は参考資料に譲ることにします。

この記事では Webpackを利用して自動的にFavicon関連設定を行う ことを目指しており、実装パートでもFavicon関連設定を手動で設定することはありません（動作確認またはデバッグの際に出力結果を見ることはあるかもしれません）。そのため、最初は軽く目を通す程度でも構いません。

iOS Safari

Favicon画像形式：PNG形式

[参考]　App Icons - Foundations - Human Interface Guidelines - Design - Apple Developer
App icons in all platforms use the PNG format and support the following color spaces:

Display P3 (wide-gamut color)

sRGB (color)

Gray Gamma 2.2 (grayscale)

Favicon画像サイズ：180x180

Favicon画像サイズの設定項目は非常に多いですが、未設定の項目に関しては設定済み項目の画像から自動生成されるという旨が Apple Developer に記載されています。iOS/iPadOS系の設定項目に含まれるもののうち最も大きな画像サイズが180x180なので、このサイズを設定しておけば基本的に問題ないということのようです。

[参考] App Icons - Foundations - Human Interface Guidelines - Design - Apple Developer
You can let the system automatically scale down your large app icon to produce all other sizes, or — if you want to customize the appearance of the icon at specific sizes — you can supply multiple versions.

Favicon設定例

<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">

[参考]

Configuring Web Applications - Apple Developer

Icons and browser colors - web.dev

Android Google-Chrome

Favicon画像形式：PNG/SVG形式等
Favicon画像サイズ：192x192・512x512

Faviconとして少なくとも192x192・512x512サイズの画像を用意すべきである旨が web.dev に記載されています。オプションとしてより多様なサイズの画像を設定することもできます。

[参考] Add a web app manifest - web.dev
For Chromium, you must provide at least a 192x192 pixel icon, and a 512x512 pixel icon. If only those two icon sizes are provided, Chrome automatically scales the icons to fit the device.

Google Chromeにおいて、Faviconの画像サイズは48の倍数である必要があります。

[参考] Icons and browser colors - web.dev
Icons sizes should be based on 48px, for example 48px, 96px, 144px and 192px.

Favicon設定例

<!-- Webアプリマニフェスト -->
<link rel="manifest" href="/manifest.webmanifest">

ここでは Webアプリマニフェスト と呼ばれるマニフェストファイル /manifest.webmanifest をWebサイトに追加した上で、このマニフェストファイルを指定するという設定をHTMLファイルに記述していると想定しています。マニフェストファイルに関する詳細については以下の記事が参考になります。

[参考]

プログレッシブウェブアプリ (PWA) | MDN

ウェブアプリマニフェスト | MDN

Windows Internet-Explorer

Favicon画像形式：PNG/SVG形式等
Favicon画像サイズ：512x512 / 150x150 等

Windows環境で提供可能な画像の種類に関しては Microsoft Edgeのドキュメントに記載されています。最も基本的な設定では512x512サイズの画像、より詳細な設定では複数種類サイズの画像を設定することもできます。

[参考] Define icons and a theme color - Microsoft Edge Development | Microsoft Learn
Your PWA can be enhanced on Windows by supplying the images with specific dimensions in your web app manifest. We recommend choosing one of the options below:

Level 1: (Basic image support: 512x512) This is the base image from which to generate missing images.

Level 2: (Tiles) At this level, your web app manifest contains tile images for the default (1x) display scale. Each of the images must be in PNG format and have the any purpose set. Here is a list of recommended images and sizes.

Level 3: (Tiles with display scales) At this level, your web app manifest should contain tile images for all Windows display scale sizes. Display scale is a user-configuration in Windows (users can change it by going to Settings > Display > Scale).

Level 4 (Tiles, display scales, and target sizes) At this level you supply images for tiles with display scales and target size images for display in various surfaces in Windows, including taskbar, start menu, task manager, ALT+Tab task switcher, and more. This provides the best experience for your users, but also requires the most developer effort.

Favicon設定例

<!-- Webアプリマニフェスト -->
<link rel="manifest" href="/manifest.webmanifest">

<!-- Windowsピン留め画像設定 -->
<meta name="msapplication-config" content="/browserconfig.xml">

ここでは Webアプリマニフェスト と呼ばれるマニフェストファイル /manifest.webmanifest をWebサイトに追加した上で、このマニフェストファイルを指定するという設定をHTMLファイルに記述していると想定しています。マニフェストファイルに関する詳細については以下の記事が参考になります。

[参考] Webアプリマニフェスト

プログレッシブウェブアプリ (PWA) | MDN

ウェブアプリマニフェスト | MDN

Web アプリマニフェストを使用してプログレッシブ Web アプリをオペレーティングシステムに統合する - Microsoft Edge Development | Microsoft Learn

アイコンとテーマの色を定義する - Microsoft Edge Development | Microsoft Learn

Icons and browser colors - web.dev

Favicon設定にWebpackを使うべきか？

この記事はWebpackが組み込まれた開発環境を想定しており、そうした開発環境ではFavicon画像生成・関連設定出力を自動的に実行してくれるこの記事のアプローチが有効です。これまでの説明にもあったように、最近のWebサイトでは複数種類/サイズのFavicon画像が必要になっており、それらを手動で作成するのは大変な作業です。Favicon画像の変更頻度は非常に少ないとは思いますが、それでもその作業を自動化することには大きなメリットがあると思います。

Webpack以外のアプローチとして、Real Favicon Generator 等のサービスを利用するということも考えられます。Favicon画像、設定ファイル群、およびHTMLタグ群等必要なもの一式をまとめて提示してくれるため、（Favicon設定についてそれほど理解していなくても）単にこれをプロジェクトに組み込むことでFaviconを利用できるようになります。Favicon画像変更の度にこうした組み込み作業を手動（または半自動）で行うことになりますが、Favicon画像変更の頻度が少なければそのコストも限定的でしょう。

Favicon設定は一定程度の自動化が求められるところだと思いますが、何をどのように自動化するのかは多少選択の余地があります。自分のプロジェクトに適した方法を見つけられると良いと思います。

方法

サンプルコードをGitHubで公開しています。記事と併せてご覧ください。
/website/website-dev-on-webpack5/favicon-on-webpack5

実装例の説明では、ファイル/フォルダパスを ルート相対パス の形式で記述しています。ここでルートはプロジェクトルートまたはWebサイトのドキュメントルートに相当します。

前提

Webpack等のnpmパッケージの利用には Node.js が必要です。
インストールが未実施の場合には、以下のリンクからインストールしておいてください。

また、動作確認を行うための Node.js プロジェクトを作成しておきます。
適当な名前のディレクトリ（ここでは my-favicon-project ）を用意した上で、そのディレクトリにおいて npm init コマンドを実行することで Node.js プロジェクトを新規作成することができます。

ターミナル

# my-favicon-projectディレクトリの作成
mkdir /path/to/my-favicon-project
cd /path/to/my-favicon-project

# Node.jsプロジェクトの作成
npm init

npm init コマンドを実行するとプロジェクトに関する情報を入力するよう促されますが、今回は適当な設定にしておいて問題ありません。今後必要に応じて適宜変更しましょう。
コマンド実行完了後、 /package.json という設定ファイルが新規作成されていることを確認したら事前準備完了です。

手順概要

npmパッケージを導入する
Webpackの利用に必要なnpmパッケージ　webpack　webpack-cli 、Favicon関連を自動設定するためのnpmパッケージ favicons favicons-webpack-plugin および動作確認用のHTMLをビルドするのに必要なnpmパッケージ html-webpack-plugin をプロジェクトに追加します。
Webpackの設定ファイルを記述する
Favicon画像生成およびFavicon関連設定の手順やルールを設定ファイル /webpack.config.js に記述します。
Favicon画像ファイルを準備する
Favicon画像を生成するためのソース画像ファイル /src/assets/images/favicon.png を作成します。
HTMLファイルを作成する
動作確認用のHTMLファイル /src/source.html ファイルを作成します。
Webpackビルドを実行する
Webpackのビルドを実行することで、HTMLファイル /dist/target.html およびターゲットFavicon画像ファイル群を生成します。

手順詳細

[手順1] npmパッケージを導入する

今回はWebpackを利用してFavicon画像ファイルの生成およびFavicon関連設定の自動設定を行います。
まず初めに、Webpackを利用するのに必要な　webpack webpack-cli パッケージをインストールします。
Webpack5（version5.X.X）をインストールするため、バージョン指定を行っています。

ターミナル

npm install --save-dev webpack@5 webpack-cli@5

次に、Favicon画像の生成およびFavicon関連設定の自動設定を行うために必要な favicons favicons-webpack-plugin パッケージをインストールします。

ターミナル

npm install --save-dev favicons favicons-webpack-plugin

さらに、動作確認用HTMLファイルをバンドルするのに必要な html-webpack-plugin パッケージをインストールします。

ターミナル

npm install --save-dev html-webpack-plugin

[手順2] Webpackの設定ファイルを記述する

今回は以下の2つの処理を実行するためのWebpackの設定を記述します。

Favicon画像生成およびFavicon関連設定出力を行う

入力画像 /src/aasets/images/favicon.jpg から各種Favicon画像を指定先のディレクトリ /dist に出力します。
Favicon画像を読み込むための各種設定（設定ファイルおよびHTMLタグ）を出力します。

動作確認用のHTMLを出力する

HTMLファイル　/src/source.html から　/dist/target.html を生成します。このとき、Favicon画像読み込みに必要なHTMLタグの挿入作業も行います。

これを実現する必要最小限のWebpack設定を以下に示します。

/webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const FaviconsWebpackPlugin = require("favicons-webpack-plugin");

module.exports = function() {
  return {

    mode: "development",

    entry: {},

    output: {
      /**
       * OUTPUT_DIRECTORY = /dist
       */
      path: path.resolve(__dirname, "dist"),
    },
    
    plugins: [
      new HtmlWebpackPlugin({
        /**
         * /src/source.html -> OUTPUT_DIRECTORY/target.html
         */
        template: path.resolve(__dirname, "src", "source.html"),
        filename: "target.html",
        inject: true,
        minify: false,
      }),
      new FaviconsWebpackPlugin({
        /**
         * /src/assets/images/favicon.png
         * -> /favicon.ico                  (#)
         *    /favicon-16x16.png            (#)
         *    /favicon-32x32.png            (MacOS)
         *    /favicon-48x48.png            (#)
         *    /apple-touch-icon-180x180.png (iOS)
         *    /android-chrome-192x192.png   (Android)
         *    /android-chrome-512x512.png   (Android)
         *    /mstile-150x150.png           (Windows)
         */
        logo: path.resolve(__dirname, "src/assets/images/favicon.png"),
        mode: "webapp",
        devMode: "webapp",
        prefix: "./",
        inject: true,
        favicons: {
          icons: {
            android: [
              "android-chrome-192x192.png",
              "android-chrome-512x512.png",
            ],
            appleIcon: [
              "apple-touch-icon-180x180.png",
            ],
            appleStartup: false,
            favicons: [
              "favicon-16x16.png",
              "favicon-32x32.png",
              "favicon-48x48.png",
              "favicon.ico",
            ],
            windows: [
              "mstile-150x150.png",
            ],
            yandex: false,
          }
        },
      }),
    ],

  }
}

Favicon画像を利用するためには2種類の設定作業が必要となります。

1つ目は Favicon画像生成 です。適切な形式/サイズの画像を手動または自動で作成します。
上記設定では、favicons-webpack-plugin プラグインを利用することで、単一のソース画像から複数のターゲットFavicon画像を自動生成するようにしています。様々な形式/サイズのFavicon画像の生成作業をプラグインに委託することによって、効率的に多様なブラウザ/デバイス環境に対応することができます。

2つ目は Favicon画像の読み込み設定 です。各HTMLページにおいてFavicon画像を読み込むHTML要素を記述します。
上記設定では、html-webpack-plugin プラグインを（favicons-webpack-plugin と組み合わせて）利用することで、各HTMLページにFavicon画像を読み込むHTML要素を自動挿入するようにしています。Favicon画像はすべてのHTMLページにおいて共通とする場合が多いため、HTML要素の自動挿入作業をプラグインに委託することによって、コーディングの記述量を減らす効果が期待されます。

html-webpack-plugin プラグインの利用方法に関しては同シリーズ別記事（HTMLのコピー＆ペースト）を参照して頂くことにして、この記事では favicons-webpack-plugin プラグインの利用方法についてもう少し詳しく解説します。

favicons-webpack-plugin は、ソース画像からターゲットFavicon画像を自動生成するためのWebpackプラグインです。非常に多くの設定項目がありますが、特に注目すべきポイントは以下の3つです。

logo 属性にソース画像ファイルのパスを指定する
prefix 属性にターゲットFavicon画像ファイルの出力先ディレクトリを指定する
favicons 属性に生成したいFavicon画像を指定する

1つ目の logo 属性はソース画像（＝ターゲットFavicon画像の生成元画像）ファイルを指定するためのものです。
上記設定では絶対パスで指定していますが、相対パスで指定することも可能です。相対パスで指定した場合には、Webpackの context 属性を参照してパスを解決するとされています。

[参考] logo 属性

jantimon/favicons-webpack-plugin: Let webpack generate all your favicons and icons for you - GitHub

2つ目の prefix 属性はターゲット画像（＝生成結果画像）の出力先ディレクトリを指定するためのものです¹。
Favicon画像はドキュメントルートに設置する場合が多いため、上記設定でも prefix: "/" という指定を行っています。ドキュメントでは言及されていないように思いますが、favicon-webpack-pluginのソースコードを読む限りではデフォルト値が prefix: "assets/" となるようです。

[参考] prefix 属性

jantimon/favicons-webpack-plugin: Let webpack generate all your favicons and icons for you - GitHub
https://github.com/jantimon/favicons-webpack-plugin#advanced-usage

3つ目の favicons 属性はサポート対象のFavicon画像の種類を指定するためのものです。
Favicon画像生成作業は favicons パッケージに委託されているため、favicons 属性の記述フォーマットは favicons のそれによります。faviconsパッケージのドキュメントおよび favicons-webpack-pluginパッケージのドキュメントに記載されている説明が参考になります。

上記設定では、以下のFavicon画像をサポートするよう設定しています。

favicon.ico favicon-16x16.png favicon-32x32.png favicon-48x48.png
MacOS Safari等様々なブラウザで使用されるものです。
android-chrome-192x192.png android-chrome-512x512.png
Android Chromeで使用されるものです。
web.devのドキュメントに従って、192x192サイズ・512x512サイズを準備します。
apple-touch-icon-180x180.png
iOS Safariで使用されるものです。
Apple Developerのドキュメントに従って、iOSデバイスで使用される最大サイズ（180x180サイズ）を準備します。
mstile-150x150.png
Windows Microsoft Edgeで使用されるものです。
Microsoft Edgeのドキュメントに従って、mediumサイズ（150x150サイズ）を準備します²。

2023年3月現在のFavicon画像の設定に関しては背景知識パートで眺めた通りですが、そのすべてが favicons favicons-webpack-plugin でサポートされているとは限らないことに留意してください。サポートされているFavicon画像の種類は faviconsパッケージのGitHub で確認することができます。

[参考] サポート対象のFavicon画像リスト

Android - itgalaxy/favicons - GitHub

AppleIcon - itgalaxy/favicons - GitHub

Apple Startup - itgalaxy/favicons - GitHub

Favicon - itgalaxy/favicons - GitHub

Windows - itgalaxy/favicons - GitHub

Yandex - itgalaxy/favicons - GitHub

[手順3] Favicon画像ファイルを準備する

手順3では、ターゲットFavicon画像の生成元となるソース画像を準備します。
手順2の設定に従って、適当なPNG画像を1枚準備し /src/assets/images ディレクトリ配下に　favicon.png という名前で画像ファイルを配置します。

[手順4] HTMLファイルを作成する

手順4では、HTMLからFavicon画像を適切に読み込むができるということを確認するために、動作確認用のHTMLファイルを作成します。
上記設定ファイル /webpack.config.js では入力HTMLファイルパスをそれぞれ　/src/source.html に指定したので、その位置に source.html ファイルを作成しましょう。

ファイル内容はどんなものでも構いませんが、ここでは例として以下のように記述することにします（折りたたみ要素の中にあります）。

/src/source.html の入力内容例

/src/source.html

<!doctype html>
<html>
  <head>
    <title>My Favicon Project</title>
  </head>
  <body>
    <h1>My Favicon Project</h1>
  </body>
</html>

[手順5] Webpackビルドを実行する

手順1〜4でFavicon関連設定およびその動作確認のための準備が完了しました！
それではWebpackを用いて /src/assets/images/favicon.png から各種Favicon画像およびFavicon関連設定を出力させてみましょう。
ターミナルで npx webpack コマンドを実行することでビルド作業が開始します。

ターミナル

# ディレクトリ移動
cd /path/to/my-favicon-project

# Webpackコマンド実行
npx webpack

ビルドが正常に完了すれば、各種Favicon画像ファイルおよび設定ファイルが生成されていることを確認できると思います。また、出力された /dist/target.html の head タグ配下にFavicon関連設定タグが挿入されていることも確認できるはずです。

/dist/target.html の出力内容例

/dist/target.html

<!doctype html>
<html>
  <head>
    <title>My Favicon Project</title>
  <link rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png"><link rel="manifest" href="/manifest.webmanifest"><meta name="mobile-web-app-capable" content="yes"><meta name="theme-color" content="#fff"><meta name="application-name" content="my-favicon-project"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"><meta name="apple-mobile-web-app-title" content="my-favicon-project"><meta name="msapplication-TileColor" content="#fff"><meta name="msapplication-config" content="/browserconfig.xml"></head>
  <body>
    <h1>My Favicon Project</h1>
  </body>
</html>

Favicon設定が期待通り動作しているかを確認したいところですが。Webサイトが非公開の状態では実機（モバイル/タブレット端末等）で確認するのは割と難しいように思います³。公開されている状態であれば、実機で1つ1つ確認したり、Favicon Checker 等のサービスを利用して検証したりすることができます。 Favicon Checker は様々な環境におけるFavicon設定を検証してくれるため、非常に便利なツールの1つです。

非公開の状態で限定的に確認する方法の1つとしては、ローカルサーバを起動する方法が考えられます。例えば Visual Studio Code (VSCode) の Live Server を（ドキュメントルートを /dist に設定した状態で）起動することで、簡単な動作確認をすることができます。

[参考] VSCode Live Server

VSCodeで拡張機能「Live Server」を使う - Qiita

後書き

サンプルコード
/website/website-dev-on-webpack5/favicon-on-webpack5

厳密には、prefix 属性は自動挿入されるHTMLのlink要素のURLのprefixを指定するための項目で、Favicon画像の出力先ディレクトリを指定するための項目は outputPath 属性です。outputPath 属性が指定されなかった場合には prefix 属性値を利用するという仕様になっているため、outputPath 属性指定を省略することでlink要素のURLとFavicon画像のドキュメントルート相対パスを一致させることができる ようになっています。prefix 属性と併せて outputPath 属性を明示的に指定することでFavicon画像の出力先ディレクトリを任意に変更できますが、使用範囲は限られるように思います。 ↩
Pinned site metadata reference (Internet Explorer) | Microsoft Learn および Define icons and a theme color - Microsoft Edge Development | Microsoft Learn 等の資料によると、設定したFavicon画像はWindowsのスタートアップメニューに表示されるアプリのアイコンとして利用されます。 ↩
iPhone等の実機で確認する方法もあるようですが、この記事では取り扱いません。 ↩