Issue
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?
Solution
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?
Answered By - Mani Answer Checked By - Gilberto Lyons (PHPFixing Admin)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.