vuejs vue react cli html ecmascript-6 webpack vue.js favicon

html - react - static vue



¿Cómo configurar favicon.ico correctamente en el proyecto vue.js webpack? (3)

He creado un proyecto vue webpack usando vue-cli .

vue init webpack myproject

Y luego ejecutó el proyecto en modo dev :

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

Entonces, dentro del paquete web, ¿cómo importar el favicon.ico correctamente?

Consulte la Estructura del proyecto de la plantilla de paquete web: https://vuejs-templates.github.io/webpack/structure.html

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

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

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

Para su problema de favicon, puede poner un favicon.ico o favicon.png en la carpeta static y consultar el <head> de su index.html de la siguiente manera:

<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 , 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 las pestañas del navegador.

Como nota al margen, esta es la razón por la que prefiero PNG en lugar del archivo ICO:

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

Pequeña actualización para Laravel 5.x, coloque su favicon.ico o favicon.png en la carpeta /public y consulte en su index.html esta manera:

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

Espero eso ayude !