How to set favicon.ico properly on vue.js webpack project?
Question
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?
7 answers
solution1
165 ACCPTED 2016-10-22 11:33:33
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?
solution2
10 2020-04-10 17:14:32
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 eg (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.
solution3
7 2019-09-03 12:58:19
Little update for Laravel 5/6/7/8, 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 !
solution4
3 2022-04-12 02:14:14
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.
solution5
1 2022-10-04 13:49:52
You may use vue-pwa-asset-generator in order to generate a full set of favicons foreach platform.
solution6
0 2022-08-17 08:42:11
Thanks. This did the trick as per eightballs comments. I needed to move the file to the /public folder and rename it:D
<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>gear.png"> <title>Prodigy</title> </head>
solution7
0 2022-12-13 12:22:47
Just add shortcut in rel tag like that:
<link rel="shortcut icon" href="<%= BASE_URL %>favicon.ico">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.