VuePressでFavicon.icoを設定する方法

1. Favicon.icoファイルの作成: まず、Favicon.icoファイルを作成する必要があります。お使いのデザインツールで16x16ピクセルまたは32x32ピクセルのアイコンを作成し、favicon.icoという名前で保存します。

2. VuePressプロジェクトのルートにファイルを配置: 作成したfavicon.icoファイルを、VuePressプロジェクトのルートディレクトリに配置します。通常、docsディレクトリの直下になります。

3. プラグインのインストール: VuePressでFavicon.icoを設定するためには、@vuepress/plugin-pwaプラグインをインストールする必要があります。以下のコマンドを実行してインストールします。

npm install -D @vuepress/plugin-pwa

4. config.jsファイルの編集: VuePressのconfig.jsファイルを編集して、Favicon.icoを設定します。以下のコードを追加します。

module.exports = {
  plugins: [
    [
      '@vuepress/plugin-pwa',
      {
        icon: '/favicon.ico'
      }
    ]
  ]
}

5. ビルドとプレビュー: 設定を反映させるために、VuePressプロジェクトをビルドし、プレビューします。以下のコマンドを実行します。

npx vuepress build
npx vuepress serve

これで、VuePressプロジェクトのFavicon.icoが設定されます。ウェブサイトのタブやブックマークバーに指定したアイコンが表示されるはずです。