Add Favicon with React and Webpack Add Favicon with React and Webpack reactjs reactjs

Add Favicon with React and Webpack


Here is all you need:

new HtmlWebpackPlugin({    favicon: "./src/favicon.gif"})

That is definitely after adding "favicon.gif" to the folder "src".

This will transfer the icon to your build folder and include it in your tag like this <link rel="shortcut icon" href="favicon.gif">. This is safer than just importing with copyWebpackPLugin


For future googlers:You can also use copy-webpack-plugin and add this to webpack's production config:

plugins: [  new CopyWebpackPlugin({     patterns: [      // relative path is from src     { from: './static/favicon.ico' }, // <- your path to favicon    ] })]


Adding your favicon simply into to the public folder should do. Make sure the favicon is named as favicon.ico.