ちょっとがんばるWebサイト開発 on Webpack5 - 半自動的にFaviconを導入する

# 前書き

## 本記事のゴール

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

## この記事で解説する内容

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

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

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

## シリーズ記事

この記事はシリーズ **「ちょっとがんばるWebサイト開発 on Webpack5」** の記事です。
シリーズ全体の概要は [以下のリンク先記事](https://qiita.com/Sharkkii/items/df707cb68f3729493800) にまとめられています。

https://qiita.com/Sharkkii/items/df707cb68f3729493800

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

# 背景知識

## Faviconとは何か

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

> [参考] Favicon
> - [Favicon (ファビコン) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN](https://developer.mozilla.org/ja/docs/Glossary/Favicon)

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

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

```html
<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](https://developer.mozilla.org/ja/docs/Web/HTML/Element/link#attr-rel)
> - [\<link\>: 外部リソースへのリンク要素 - HTML: HyperText Markup Language | MDN #attr-href](https://developer.mozilla.org/ja/docs/Web/HTML/Element/link#attr-href)
> - [\<link\>: 外部リソースへのリンク要素 - HTML: HyperText Markup Language | MDN #attr-type](https://developer.mozilla.org/ja/docs/Web/HTML/Element/link#attr-type)

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

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

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

> [参考] HTML5仕様 `<link rel="icon">`
> - [HTML Standard - WHATWG](https://html.spec.whatwg.org/multipage/links.html#link-type-icon)

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

> [参考] Favicon設定
> - [How to Add a Favicon to your Site - QA @ W3C](https://www.w3.org/2005/10/howto-favicon)
> - [Favicon - Wikipedia](https://en.wikipedia.org/wiki/Favicon#Browser_implementation)

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

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

### iOS Safari

- Favicon画像形式：PNG形式

> [参考]　[App Icons - Foundations - Human Interface Guidelines - Design - Apple Developer](https://developer.apple.com/design/human-interface-guidelines/foundations/app-icons/#specifications)
> *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

:::note info
Favicon画像サイズの設定項目は非常に多いですが、未設定の項目に関しては設定済み項目の画像から自動生成されるという旨が [Apple Developer](https://developer.apple.com/design/human-interface-guidelines/foundations/app-icons/#specifications) に記載されています。iOS/iPadOS系の設定項目に含まれるもののうち最も大きな画像サイズが180x180なので、このサイズを設定しておけば基本的に問題ないということのようです。

> [参考] [App Icons - Foundations - Human Interface Guidelines - Design - Apple Developer](https://developer.apple.com/design/human-interface-guidelines/foundations/app-icons/#specifications)
> *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設定例

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

> [参考]
> - [Configuring Web Applications - Apple Developer](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html)
> - [Icons and browser colors - web.dev](https://web.dev/icons-and-browser-colors/#safari)

### Android Google-Chrome

- Favicon画像形式：PNG/SVG形式等

- Favicon画像サイズ：192x192・512x512

:::note info
Faviconとして少なくとも192x192・512x512サイズの画像を用意すべきである旨が [web.dev](https://web.dev/add-manifest/#manifest-properties) に記載されています。オプションとしてより多様なサイズの画像を設定することもできます。

> [参考] [Add a web app manifest - web.dev](https://web.dev/add-manifest/#manifest-properties)
> *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.*
:::

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

> [参考] [Icons and browser colors - web.dev](https://web.dev/icons-and-browser-colors/#chrome-and-opera)
> *Icons sizes should be based on 48px, for example 48px, 96px, 144px and 192px.*
:::

- Favicon設定例
```html
<!-- Webアプリマニフェスト -->
<link rel="manifest" href="/manifest.webmanifest">
```

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

> [参考]
> - [プログレッシブウェブアプリ (PWA) | MDN](https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps)
> - [ウェブアプリマニフェスト | MDN](https://developer.mozilla.org/ja/docs/Web/Manifest)
:::

### Windows Internet-Explorer

- Favicon画像形式：PNG/SVG形式等

- Favicon画像サイズ：512x512 / 150x150 等

:::note info
Windows環境で提供可能な画像の種類に関しては [Microsoft Edgeのドキュメント](https://learn.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/how-to/icon-theme-color#icon-image-sizes) に記載されています。最も基本的な設定では512x512サイズの画像、より詳細な設定では複数種類サイズの画像を設定することもできます。

> [参考] [Define icons and a theme color - Microsoft Edge Development | Microsoft Learn](https://learn.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/how-to/icon-theme-color#icon-image-sizes)
> *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設定例

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

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

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

> [参考] Webアプリマニフェスト
> - [プログレッシブウェブアプリ (PWA) | MDN](https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps)
> - [ウェブアプリマニフェスト | MDN](https://developer.mozilla.org/ja/docs/Web/Manifest)
> - [Web アプリ マニフェストを使用してプログレッシブ Web アプリをオペレーティング システムに統合する - Microsoft Edge Development | Microsoft Learn](https://learn.microsoft.com/ja-jp/microsoft-edge/progressive-web-apps-chromium/how-to/web-app-manifests)
> - [アイコンとテーマの色を定義する - Microsoft Edge Development | Microsoft Learn](https://learn.microsoft.com/ja-jp/microsoft-edge/progressive-web-apps-chromium/how-to/icon-theme-color)
> - [Icons and browser colors - web.dev](https://web.dev/icons-and-browser-colors/#internet-explorer-and-windows-phone)
:::

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

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

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

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

# 方法

:::note info
サンプルコードをGitHubで公開しています。記事と併せてご覧ください。
**[/website/website-dev-on-webpack5/favicon-on-webpack5](https://github.com/Sharkkii/sample-codes/tree/develop/website/website-dev-on-webpack5/favicon-on-webpack5)**
:::

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

## 前提

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

https://nodejs.org/ja/

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

```shell:ターミナル
# my-favicon-projectディレクトリの作成
mkdir /path/to/my-favicon-project
cd /path/to/my-favicon-project

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

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

## 手順概要

1. [npmパッケージを導入する](#手順1-npmパッケージを導入する)
Webpackの利用に必要なnpmパッケージ　`webpack`　`webpack-cli` 、Favicon関連を自動設定するためのnpmパッケージ `favicons` `favicons-webpack-plugin` および動作確認用のHTMLをビルドするのに必要なnpmパッケージ `html-webpack-plugin` をプロジェクトに追加します。

2. [Webpackの設定ファイルを記述する](#手順2-webpackの設定ファイルを記述する)
Favicon画像生成およびFavicon関連設定の手順やルールを設定ファイル `/webpack.config.js` に記述します。

3. [Favicon画像ファイルを準備する](#手順3-favicon画像ファイルを準備する)
Favicon画像を生成するためのソース画像ファイル `/src/assets/images/favicon.png` を作成します。

4. [HTMLファイルを作成する](#手順4-htmlファイルを作成する)
動作確認用のHTMLファイル `/src/source.html` ファイルを作成します。

5. [Webpackビルドを実行する](#手順5-webpackビルドを実行する)
Webpackのビルドを実行することで、HTMLファイル `/dist/target.html` およびターゲットFavicon画像ファイル群を生成します。

## 手順詳細

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

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

https://webpack.js.org/

```shell:ターミナル
npm install --save-dev webpack@5 webpack-cli@5
```

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

https://www.npmjs.com/package/favicons

https://www.npmjs.com/package/favicons-webpack-plugin

```shell:ターミナル
npm install --save-dev favicons favicons-webpack-plugin
```

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

https://www.npmjs.com/package/html-webpack-plugin

```shell:ターミナル
npm install --save-dev html-webpack-plugin
```

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

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

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

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

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

```js:/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のコピー＆ペースト）](https://qiita.com/Sharkkii/items/033e3d8119bfe60f520e) を参照して頂くことにして、この記事では `favicons-webpack-plugin` プラグインの利用方法についてもう少し詳しく解説します。

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

1) **`logo` 属性にソース画像ファイルのパスを指定する**

2) **`prefix` 属性にターゲットFavicon画像ファイルの出力先ディレクトリを指定する**

3) **`favicons` 属性に生成したいFavicon画像を指定する**

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

> [参考] `logo` 属性
> - [jantimon/favicons-webpack-plugin: Let webpack generate all your favicons and icons for you - GitHub](https://github.com/jantimon/favicons-webpack-plugin#a-note-on-path-resolution)

2つ目の `prefix` 属性はターゲット画像（＝生成結果画像）の出力先ディレクトリを指定するためのものです[^1]。
Favicon画像はドキュメントルートに設置する場合が多いため、上記設定でも `prefix: "/"` という指定を行っています。ドキュメントでは言及されていないように思いますが、[favicon-webpack-pluginのソースコード](https://github.com/jantimon/favicons-webpack-plugin/blob/5bb39dfaf30fcc1b490452f259012559c57de869/src/index.js#L31) を読む限りではデフォルト値が `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#a-note-on-path-resolution)
https://github.com/jantimon/favicons-webpack-plugin#advanced-usage

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

上記設定では、以下の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のドキュメント](https://web.dev/add-manifest/#manifest-properties) に従って、192x192サイズ・512x512サイズを準備します。

- `apple-touch-icon-180x180.png`
iOS Safariで使用されるものです。
[Apple Developerのドキュメント](https://developer.apple.com/design/human-interface-guidelines/foundations/app-icons/#specifications) に従って、iOSデバイスで使用される最大サイズ（180x180サイズ）を準備します。

- `mstile-150x150.png`
Windows Microsoft Edgeで使用されるものです。
[Microsoft Edgeのドキュメント](https://learn.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/how-to/icon-theme-color#icon-image-sizes) に従って、mediumサイズ（150x150サイズ）を準備します[^2]。

:::note info
2023年3月現在のFavicon画像の設定に関しては [背景知識パート](#背景知識) で眺めた通りですが、そのすべてが `favicons` `favicons-webpack-plugin` でサポートされているとは限らないことに留意してください。サポートされているFavicon画像の種類は [faviconsパッケージのGitHub](https://github.com/itgalaxy/favicons/tree/master/src/platforms) で確認することができます。

[参考] サポート対象のFavicon画像リスト
> - [Android - itgalaxy/favicons - GitHub](https://github.com/itgalaxy/favicons/blob/ed8404a1f2c749bd647959a44568cf1706526b00/src/platforms/android.ts#L31)
> - [AppleIcon - itgalaxy/favicons - GitHub](https://github.com/itgalaxy/favicons/blob/ed8404a1f2c749bd647959a44568cf1706526b00/src/platforms/appleIcon.ts#L7)
> - [Apple Startup - itgalaxy/favicons - GitHub](https://github.com/itgalaxy/favicons/blob/ed8404a1f2c749bd647959a44568cf1706526b00/src/platforms/appleStartup.ts#L13)
> - [Favicon - itgalaxy/favicons - GitHub](https://github.com/itgalaxy/favicons/blob/ed8404a1f2c749bd647959a44568cf1706526b00/src/platforms/favicons.ts#L6)
> - [Windows - itgalaxy/favicons - GitHub](https://github.com/itgalaxy/favicons/blob/ed8404a1f2c749bd647959a44568cf1706526b00/src/platforms/windows.ts#L8)
> - [Yandex - itgalaxy/favicons - GitHub](https://github.com/itgalaxy/favicons/blob/ed8404a1f2c749bd647959a44568cf1706526b00/src/platforms/yandex.ts#L7)
:::

### [手順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` ファイルを作成しましょう。

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

<details>
<summary> /src/source.html の入力内容例</summary>

```html:/src/source.html
<!doctype html>
<html>
  <head>
    <title>My Favicon Project</title>
  </head>
  <body>
    <h1>My Favicon Project</h1>
  </body>
</html>
```
</details>

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

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

```shell:ターミナル
# ディレクトリ移動
cd /path/to/my-favicon-project

# Webpackコマンド実行
npx webpack
```

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

<details>
<summary> /dist/target.html の出力内容例</summary>

```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>
```
</details>

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

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

> [参考] VSCode Live Server
> - [VSCodeで拡張機能「Live Server」を使う - Qiita](https://qiita.com/nako_sleep_9h/items/e6f6a69f70a96e61fc11)

# 後書き

**サンプルコード**
**[/website/website-dev-on-webpack5/favicon-on-webpack5](https://github.com/Sharkkii/tech-blog-code/tree/develop/website/website-dev-on-webpack5/favicon-on-webpack5)**

[^1]: 厳密には、`prefix` 属性は自動挿入されるHTMLのlink要素のURLのprefixを指定するための項目で、Favicon画像の出力先ディレクトリを指定するための項目は `outputPath` 属性です。`outputPath` 属性が指定されなかった場合には `prefix` 属性値を利用するという仕様になっているため、**`outputPath` 属性指定を省略することでlink要素のURLとFavicon画像のドキュメントルート相対パスを一致させることができる** ようになっています。`prefix` 属性と併せて `outputPath` 属性を明示的に指定することでFavicon画像の出力先ディレクトリを任意に変更できますが、使用範囲は限られるように思います。
[^2]: [Pinned site metadata reference (Internet Explorer) | Microsoft Learn](https://learn.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/dn255024(v=vs.85)) および [Define icons and a theme color - Microsoft Edge Development | Microsoft Learn](https://learn.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/how-to/icon-theme-color#icon-image-sizes) 等の資料によると、設定したFavicon画像はWindowsのスタートアップメニューに表示されるアプリのアイコンとして利用されます。
[^3]: iPhone等の実機で確認する方法もあるようですが、この記事では取り扱いません。