Como definir favicon.ico corretamente no projeto vue.js webpack?

Question 1

Eu criei um vue webpackprojeto usando vue-cli.

vue init webpack myproject

E então executei o projeto no devmodo:

npm run dev

Eu tenho este erro:

Falha ao carregar o recurso: o servidor respondeu com um status 404 (não encontrado) http: // localhost: 8080 / favicon.ico

Então, dentro do webpack, como importar favicon.icocorretamente?

Question 2

Confira a Estrutura do projeto do template webpack: https://vuejs-templates.github.io/webpack/structure.html

Note-se que há uma pasta estática, juntamente com node_modules, src, etc.

Se você colocar alguma imagem na staticpasta, como favicon.png, ela estará disponível em http: // localhost: 8080 / static / favicon.png

Aqui está a documentação para ativos estáticos: https://vuejs-templates.github.io/webpack/static.html

Para o seu problema com o favicon, você pode colocar um favicon.icoou favicon.pngna staticpasta e referir-se ao <head>de seu index.html da seguinte maneira:

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

Se você não definir um favicon.icoem seu index.html, o navegador solicitará um favicon da raiz do site (comportamento padrão). Se você especificar um favicon como acima, não verá mais esse 404. O favicon também começará a aparecer nas guias do navegador.

Como observação, aqui está a razão pela qual prefiro PNG em vez do arquivo ICO:

favicon.png vs favicon.ico - por que devo usar PNG em vez de ICO?

Question 3

Pequena atualização para o Laravel 5.x, coloque o seu favicon.icoou favicon.pngna /publicpasta e consulte-o index.htmlassim:

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

Espero que ajude !

Question 4

Por algum motivo, as soluções acima não funcionaram para mim antes de converter o favicon.icoarquivo padrão favicon.pnge renomeá-lo para, favicon-xyz.pngpor exemplo (coloquei este arquivo na /publicpasta) e editei o index.htmlarquivo da seguinte maneira:

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

Pode ser útil para alguém.