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

前端未结

关注

 3  1083

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

vue init webpack myproject

And then ran the project under

相关标签:

3条回答

名媛妹妹

2020-12-01 00:09
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?
0 讨论(0)
发布评论:

提交评论
- 加载中...
忘掉有多难

2020-12-01 00:10
Little update for Laravel 5.x, 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 !
0 讨论(0)
发布评论:

提交评论
- 加载中...
天涯浪人

2020-12-01 00:26
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...