TODOアプリにfavicon を設定する

TODOアプリに favicon を設定する。ただ、Reactだとbody部分の要素しかいじれないので webpack で設定する。 色々試したけど、favicons-webpack-plugin が最終的にやりたいことにマッチしたので、それにした。 まず、プラグインをインストール。

$ npm i --save favicons-webpack-plugin

次に webpack.config.js を編集

const FaviconsWebpackPlugin = require("favicons-webpack-plugin")

module.exports = {
  plugins: [
    new FaviconsWebpackPlugin('./src/favicon.png'),
  ]
};

./src/favicon.png をもとに Android / iPhone / Web 用の favicon が自動生成され index.html に自動でリンクされる。

ただ、このままだと、webpack-dev-server ではちゃんと表示されなかったので、以下の設定を webpack.config.js に追加した。

module.exports = {
  devServer: {
    contentBase: [path.resolve(__dirname, "public/")],
  },
}

以上！！