¿Cómo configurar favicon.ico correctamente en el proyecto de paquete web vue.js?

91

He creado un vue webpackproyecto 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

Entonces, dentro del paquete web, ¿cómo importar favicon.icocorrectamente?

html ecmascript-6 webpack vue.js favicon Alfred Huang
fuente
1
¿Ha intentado simplemente colocarlo en la raíz del sitio? :) ¿O en la carpeta de compilación pública?
Benjamin

Respuestas:

150

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 pones alguna imagen en la staticcarpeta, 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 favicon.icoo favicon.pngen la staticcarpeta y hacer referencia en <head>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.icoen su index.html, entonces el navegador solicitará un favicon de la raíz del sitio web (comportamiento predeterminado). Si especifica un favicon como arriba, ya no verá ese 404. El favicon también comenzará a aparecer en las pestañas de su navegador.

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

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

Mani
fuente
1
¿Qué pasa si quiero mantener mi favicon en src / assets? ¿Es mejor dejarlo en una carpeta estática junto con .gitkeep?
Akin Hwan
4
@AkinHwan No he intentado esto todavía, pero si mantiene alguna imagen en src / assets, se tratará como una dependencia del módulo y entrará en el archivo de compilación final como una imagen en línea (formato base64). Esto aumentará innecesariamente el tamaño de la construcción. Nada de qué preocuparse, no afectará el rendimiento de ninguna manera. Prefiero mantener las imágenes como "activos estáticos reales" como se explica en los documentos . Tus preferencias pueden variar. Debe probar ambos métodos y elegir el que más le convenga.
Mani
6
Esta respuesta parece un poco desactualizada. En la plantilla de paquete web vue actual, hay un directorio público , no un directorio estático .
JakeParis
4

Pequeña actualización para Laravel 5.x, coloque su favicon.icoo favicon.pngen la /publiccarpeta y consúltelo de index.htmlesta 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 !

bola ocho
fuente
3

Por alguna razón, las soluciones anteriores no funcionaron para mí antes de convertir el favicon.icoarchivo predeterminado favicon.pngy cambiarle el nombre a, favicon-xyz.pngpor ejemplo, (puse este archivo en la /publiccarpeta) y edité el index.htmlarchivo de la siguiente manera:

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

Podría ser útil para alguien.

tjurkan
fuente