Come impostare correttamente favicon.ico sul progetto webpack vue.js?

Question 1

Ho creato un vue webpackprogetto usando vue-cli.

vue init webpack myproject

E poi ha eseguito il progetto in devmodalità:

npm run dev

Ho ricevuto questo errore:

Impossibile caricare la risorsa: il server ha risposto con uno stato di 404 (non trovato) http: // localhost: 8080 / favicon.ico

Quindi all'interno del webpack, come importare favicon.icocorrettamente?

Question 2

Controlla la struttura del progetto del modello webpack: https://vuejs-templates.github.io/webpack/structure.html

Si noti che non v'è una cartella statica, insieme node_modules, srce così via

Se metti qualche immagine nella staticcartella, ad esempio favicon.png, sarà resa disponibile su http: // localhost: 8080 / static / favicon.png

Ecco la documentazione per le risorse statiche: https://vuejs-templates.github.io/webpack/static.html

Per il tuo problema con la favicon, puoi mettere un favicon.icoo favicon.pngnella staticcartella e fare riferimento nel <head>tuo index.html come segue:

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

Se non si definisce un favicon.iconel proprio index.html, il browser richiederà una favicon dalla radice del sito Web (comportamento predefinito). Se specifichi una favicon come sopra, non vedrai più quella 404. La favicon inizierà a essere visualizzata anche nelle schede del browser.

Come nota a margine, ecco il motivo per cui preferisco il file PNG invece del file ICO:

favicon.png vs favicon.ico - perché dovrei usare PNG invece di ICO?

Question 3

Piccolo aggiornamento per Laravel 5.x, posiziona il tuo favicon.icoo favicon.pngnella /publiccartella e fai riferimento ad esso in index.htmlquesto modo:

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

Spero che sia d'aiuto !

Question 4

Per qualche motivo, le soluzioni di cui sopra non hanno funzionato per me prima di convertire il favicon.icofile predefinito in favicon.pnge rinominarlo ad favicon-xyz.pngesempio (ho inserito questo file nella /publiccartella) e modificato il index.htmlfile come segue:

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

Potrebbe essere utile per qualcuno.