javascriptreactjswebpackhtml-webpack-pluginwebpack-plugin

How to add favicon in react application?

I want to add favicon in my react application. I saw this post and followed but it is not working in my case. I added favicon.ico inside public folder where index.html is present. This is my directory structure enter image description here

This is the snippet of my index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8'>
    <meta name='color-scheme' content='light'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>My App</title>
    <link rel="icon" href="./public/favicon.ico"></link>
    <script src="/env-config.js"></script>
  </head>
  <body>
    <div id="root"></div>   
  </body>
</html>

This is the snippet of my webpack.config.js

const { webpackConfig, webpackMerge, htmlOverlay } = require('just-scripts');
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = webpackMerge.merge(
  webpackConfig({}),
  htmlOverlay({
    template: 'public/index.html'
  }),
  {
    output: {
      publicPath: '/'
    },
    devServer: {
      historyApiFallback: true
    },
    plugins:[
      new webpack.DefinePlugin({ 
        'process.env.API_URL': JSON.stringify(process.env.API_URL)
      }),
      new HtmlWebpackPlugin({
        favicon: './public/favicon.ico',
      })
    ]
  }
);

I added HtmlWebpackPlugin as shown above but getting this error on npm run build

ERROR in Conflict: Multiple assets emit different content to the same filename index.html

webpack 5.73.0 compiled with 1 error in 72911 ms
[12:42:26 pm] x Error detected while running 'webpack'
[12:42:26 pm] x ------------------------------------
[12:42:26 pm] x Webpack failed with 1 error(s).
[12:42:26 pm] x ------------------------------------
[12:42:26 pm] x finished 'build' in 87.6s with errors
[12:42:26 pm] x Error previously detected. See above for error messages.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! test-report-fluent-single@0.1.0 build: `just-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the test-report-fluent-single@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

When I removed the HtmlWebpackPlugin, the build is successful but I am not seeing the favicon.ico in the dist folder and also the favicon is not visible in the browser.

I am able to see the favicon only at the homepage and I checked the network tab and getting 304 ok status on http://localhost:8080/public/favicon.ico But when I render other components and navigate to different url, I am getting 404 Not found on http://localhost:8080/home/public/favicon.ico

I also tried adding %PUBIC_URL%/ in index.html href before the path of favicon but getting the error of

URIError: Failed to decode param '/%PUBLIC_URL%/public/favicon.ico'

And in network tab I am getting 400 Bad Request error on http://localhost:8080/%PUBLIC_URL%/public/favicon.ico

In this case I am able to see the favicon in localhost with errors in console but not able to see icon when I deploy my app.

Solution

  • first you can try : chagne favicon.ico and try a svg file href="./public/favicon.svg"

    if this doesn't work:

    add this new rule to your webpack.config.json:

    module: {
    // configuration regarding modules
    rules: [
          {
            test: /\.(svg|png|jpg|jpeg|gif|ico)$/,
            exclude: /node_modules/,
          }