Cómo configurar favicon.ico correctamente en vue.js webpack proyecto?

Question

Cómo configurar favicon.ico correctamente en vue.js webpack proyecto?

He creado un proyecto vue webpack usando vue-cli.

vue init webpack myproject

Y luego ejecutó el proyecto bajo dev modo:

npm run dev

Tengo este error:

Error al cargar el recurso: el servidor respondió con un estado de 404 (No encontrado) http://localhost:8080/favicon.ico

Así que dentro de webpack, ¿cómo importar el favicon.ico correctamente?

61

html ecmascript-6 webpack favicon vue.js

Author: Saurabh, 2016-10-22

Source

1 answers

score 99 · Accepted Answer

Echa un vistazo a la Estructura del proyecto de la plantilla webpack: https://vuejs-templates.github.io/webpack/structure.html

Tenga en cuenta que hay una carpeta estática, junto con node_modules, src, etc.

Si pones alguna imagen en la carpeta static, como favicon.png, estará disponible en http://localhost:8080/static/favicon.png

Aquí está la documentación para los activos estáticos: https://vuejs-templates.github.io/webpack/static.html

Para tu problema de favicon, puedes poner un favicon.ico o favicon.png en la carpeta static y referirte en el <head> de tu índice.html como sigue:

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

Si no define un favicon.ico en su index.html, entonces el navegador solicitará un favicon desde la raíz del sitio web (comportamiento predeterminado). Si especifica un favicon como el anterior, ya no verá ese 404. El favicon también comenzará a aparecer en su navegador pestañas.

Como nota al margen, aquí está la razón por la que prefiero PNG en lugar de archivo ICO:

Favicon.png vs favicon.ico - ¿por qué debería usar PNG en lugar de ICO?