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

Question

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?

Answer 1

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.