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

91

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?

html ecmascript-6 webpack vue.js favicon Alfred Huang
fonte
1
Você já tentou apenas soltá-lo na raiz do site? :) Ou na pasta de compilação pública?
Benjamin

Respostas:

150

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?

Mani
fonte
1
e se eu quiser manter meu favicon em src / assets? é melhor deixá-lo em uma pasta estática junto com .gitkeep?
Akin Hwan
4
@AkinHwan Ainda não tentei fazer isso, mas se você mantiver qualquer imagem em src / assets, ela será tratada como uma dependência de módulo e irá para o arquivo de compilação final como uma imagem embutida (formato base64). Isso aumentará desnecessariamente o tamanho da construção. Nada para se preocupar, isso não afetará de forma alguma o desempenho. É minha preferência manter as imagens como "ativos estáticos reais", conforme explicado nos documentos . Suas preferências podem variar. Você precisa experimentar os dois métodos e escolher aquele que funciona para você.
Mani
6
Esta resposta parece um pouco desatualizada. No modelo atual do vue webpack, há um diretório público , não um diretório estático .
JakeParis
4

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 !

bola oito
fonte
3

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.

Tjurkan
fonte