Home » vue » (Vue.js project) Webpack doesn't save favicon image to static folder on build

(Vue.js project) Webpack doesn't save favicon image to static folder on build

Posted by: admin November 26, 2021 Leave a comment

Questions:

I have the default Vue project with Webpack

vue init webpack my-project


I’ve put favicon.png into src/assets (as all my other images) and specified it in index.html:

<link rel="icon" type="image/png" href="/src/assets/favicon.png"/>

But after I’ve ran npm run build I don’t see the favicon image in the static folder


Solutions from github:

This answer on github suggests that I have to do this:

In webpack.config.*.js files

new HtmlWebpackPlugin({   
    favicon: 'src/images/favicon.ico'

Is that how I should do it? Why is it so hard for webpack to save a favicon without you messing with config?

Answers:

By default, favicon files are in static/img/icons directory. You can change those files with yours. If you change a file name or extension, you should change corresponding file name in index.html, too.