Add Favicon with React and Webpack

Question

I am attempting to add a favicon to a React-based website that I made using webpack. It has been a total nightmare to add a favicon and I have tried many solutions to no ava

Answer 1

Use the file-loader for that:

{
    test: /\.(svg|png|gif|jpg|ico)$/,
    include: path.resolve(__dirname, path),
    use: {
        loader: 'file-loader',
        options: {
            context: 'src/assets',
            name: 'root[path][name].[ext]'
        }
    }
}

Answer 2

I will give simple steps to add favicon :-)

• Create your logo and save as logo.png

• Change logo.png to favicon.ico

  Note : when you save it is favicon.ico make sure it's not favicon.ico.png

• It might take some time to update

  change icon size in manifest.json if you can't wait