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

I have created a vue webpack project using vue-cli.

vue init webpack myproject

And then ran the project under dev mode:

npm run dev

I got this error:

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8080/favicon.ico

So inside webpack, how to import the favicon.ico correctly?

htmlvue.jswebpackfavicon


Solution 1:[1]

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 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: https://vuejs-templates.github.io/webpack/static.html

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:

<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" type="image/png" href="/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?

Solution 2:[2]

For some reason, the above solutions did not work for me before converting the default favicon.ico file to favicon.png and renaming it to favicon-xyz.png e.g. (I have put this file in /public folder) and edited the index.html file as follows:

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="icon" href="<%= BASE_URL %>favicon-xyz.png">
    .
    .
    .
</head>

Might be useful for someone.

Solution 3:[3]

Little update for Laravel 5/6/7/8/9, place your favicon.ico or favicon.png into the /public folder and refer to it in your index.html like this:

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

Hope it helps !

Solution 4:[4]

As of 2022, @Mani answer is a little outdated as static assets are now served in public folder other than static.

Just generate a .ico favicon file (this site provides free online favicon generation), rename it to favicon.ico and place it in public folder, no need to change index.html, reload and new favicon will be displayed.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Community
Solution 2 tjurkan
Solution 3
Solution 4 CDT

Related Questions