score:0

<link href="<%= htmlwebpackplugin.options.favicon %>" rel="shortcut icon">

and

new htmlwebpackplugin({
   favicon: "image/favicon.ico",
})

and

{
  test: /\.(jpe?g|gif|png|ico)$/,
  use: ['file-loader?name=[name].[ext]']
},

score:0

solution

  1. npm install interpolate-html-plugin --save-dev
  2. add to list of plugins in webpack config

new interpolatehtmlplugin({public_url: 'static })

score:0

i was getting this error from create-react-app when i was serving the page from express server. it was because i was serving static pages from public folder instead of build folder.

not working:

app.use('/', express.static(path.join(__dirname, '../public')));

working

app.use('/', express.static(path.join(__dirname, '../build')));

score:3

problem fixed step 1) remove %public_url% with the actual path. %public_url%/favicon.ico with favicon.ico before <link rel="icon" href="%public_url%/favicon.ico" /> after <link rel="icon" href="favicon.ico" />

step 2) add this rule to the webpack.config.js

plugins: [new htmlwebpackplugin({ template: path.resolve(__dirname, "public", "index.html"),
    favicon: "./public/favicon.ico",
    filename: "index.html",
    manifest: "./public/manifest.json",
  })]

step 3) add svg support in webpack(important) install svg-url-loader package

 {
        test: /\.svg$/,
        use: [
          {
            loader: 'svg-url-loader',
            options: {
              limit: 10000,
            },
          },
        ],
     }

score:4

i had the same issue and fixed it with the following:

inside webpack.config.js in the plugins array, add htmlwebpackplugin and interpolatehtmlplugin

  new htmlwebpackplugin(
        object.assign(
          {},
          {
            inject: true,
            template: paths.apphtml,
          },
          isenvproduction
            ? {
                minify: {
                  removecomments: true,
                  collapsewhitespace: true,
                  removeredundantattributes: true,
                  useshortdoctype: true,
                  removeemptyattributes: true,
                  removestylelinktypeattributes: true,
                  keepclosingslash: true,
                  minifyjs: true,
                  minifycss: true,
                  minifyurls: true,
                },
              }
            : undefined
        )
      ),

      new interpolatehtmlplugin(htmlwebpackplugin, env.raw)

this is the documentation of interpolatehtmlplugin

makes some environment variables available in index.html.
the public url is available as %public_url% in index.html, e.g.:
<link rel="shortcut icon" href="%public_url%/favicon.ico">
in production, it will be an empty string unless you specify "homepage"
in `package.json`, in which case it will be the pathname of that url.
in development, this will be an empty string.

score:26

quick fix

what if you were to replace %public_url% with the actual path. i think that babel is having issues transpiling the %. try replacing %public_url%/favicon.ico with /public/favicon.ico and the issue is resolved.

better fix

add a new rule to your webpack.config.js.

//...
{
  test: /\.(png|svg|jpg|jpeg|gif|ico)$/,
  exclude: /node_modules/,
  use: ['file-loader?name=[name].[ext]'] // ?name=[name].[ext] is only necessary to preserve the original file name
}
//...

then have the .ico resource copied to the dist directory by adding an import in your app.js. import '../public/favicon.ico';

in your index.html; <link rel="shortcut icon" href="favicon.ico"> to make use of your icon. no longer need to provide a path since it will be copied to the dist directory

or:

in addition to the rule added to the webpack.config.js mentioned above, adding plugins to the webpack config may be a better way to go depending on your setup.

for me this looks like adding the npm package html-webpack-plugin to the project. then requiring it in the webpack config; const htmlwebpackplugin = require('html-webpack-plugin');. then adding plugins to the module.exports.

//...
plugins: [
  new htmlwebpackplugin({
    template: './public/index.html',
    filename: './index.html',
    favicon: './public/favicon.ico'
  })
]
//...

going this route and doing the work in the webpack config means the line added to the app.js to import the favicon.ico will no longer be necessary.


edit: as mentioned by @tolumide

don't forget to configure the webpack.config appropriately per environment.


Related Query

More Query from same tag