How to set favicon.ico properly on vue.js webpack project?

Check out the Project Structure of webpack template:

Note that there is a static folder, along with node_modules, src, etc.

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:

For your favicon issue, you can put a favicon.ico or favicon.png into the static folder and refer in the <head> of your index.html as follows:

    <meta charset="utf-8">
    <link rel="shortcut icon" type="image/png" href=""/>
    <title>My Vue.js app</title>

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?

Leave a Comment