Check out the Project Structure of webpack template: https://vuejs-templates.github.io/webpack/structure.html
Note that there is a static folder, along with
If you put some image into the
static folder, like
favicon.png, it will be made available at http://localhost:8080/static/favicon.png
Here is the documentation for static assets: https://vuejs-templates.github.io/webpack/static.html
For your favicon issue, you can put a
favicon.png into the
static folder and refer in the
<head> of your index.html as follows:
<head> <meta charset="utf-8"> <link rel="shortcut icon" type="image/png" href="https://stackoverflow.com/static/favicon.png"/> <title>My Vue.js app</title> ... </head>
If you do not define a
favicon.ico in your
index.html, then the browser will request for a favicon from the website root (default behaviour). If you specify a favicon as above, you will not see that 404 anymore. The favicon will also start showing up in your browser tabs.
As a side note, here is the reason why I prefer PNG instead of ICO file:
favicon.png vs favicon.ico – why should I use PNG instead of ICO?