How to set favicon.ico properly on vue.js webpack project?

html ecmascript-6 webpack vue.js favicon
Alfred Huang picture Alfred Huang · Oct 22, 2016 · Viewed 87.4k times · Source

I have created a vue webpack project using vue-cli.

vue init webpack myproject

And then ran the project under dev mode:

npm run dev

I got this error:

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8080/favicon.ico

So inside webpack, how to import the favicon.ico correctly?

Answer

Mani picture Mani · Oct 22, 2016

Check out the Project Structure of webpack template: https://vuejs-templates.github.io/webpack/structure.html

Note that there is a static folder, along with node_modules, src, etc.

If you put some image into the static folder, like favicon.png, it will be made available at http://localhost:8080/static/favicon.png

Here is the documentation for static assets: https://vuejs-templates.github.io/webpack/static.html

For your favicon issue, you can put a favicon.ico or favicon.png into the static folder and refer in the <head> of your index.html as follows:

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

If you do not define a favicon.ico in your index.html, then the browser will request for a favicon from the website root (default behaviour). If you specify a favicon as above, you will not see that 404 anymore. The favicon will also start showing up in your browser tabs.

As a side note, here is the reason why I prefer PNG instead of ICO file:

favicon.png vs favicon.ico - why should I use PNG instead of ICO?

Related questions

Concatenating variables and strings in React

Is there a way to incorporate React's curly brace notation and an href tag? Say we have the following value in the state: {this.state.id} and the following HTML attributes on a tag: href="#demo1" id="demo1" Is there …

Read More
ES6 modules in the browser: Uncaught SyntaxError: Unexpected token import

I'm new to ES6 (ECMAScript 6), and I'd like to use its module system in the browser. I read ES6 is supported by Firefox and Chrome, but I'm getting the following error using export Uncaught SyntaxError: Unexpected token import I have …

Read More
ES6 module Import giving "Uncaught SyntaxError: Unexpected identifier"

For a personal project, I'm trying to use ES6 import to write cleaner code. As first test, I'm writing an object that should generate a menu. The whole code is working when I'm directly loading up the class, yet when …

Read More