Vue CLI Favicon

Question

I am using the Vue CLI webpack template, but struggling to load my own favicon.

I have run vue init webpack my-app

In index.html I have included:

<link rel="shortcut icon" href="<%= webpackConfig.output.publicPath %>favicon.ico">

... and I DO see the default (Vue) favicon. However, I cannot work out where that favicon is located (or otherwise referenced), nor can I figure out where to place my own favicon, to replace it.

I have also followed the advice in this answer, which suggests placing the favicon image in the static folder and including this in index.html:

<link rel="shortcut icon" type="image/png" href="/static/favicon.png"/>

However, I do not have access to my favicon, as promised.

My guess is that the favicon location / file is referenced somewhere in the CLI config files, but I cannot find it.

Answer 1

I have the same problem:

• I Added my own favicon in the public folder, overwriting the existing vue one. But still, the vue favicon shows up; locally (vue serve) and on my server (uploaded the dist/ content built with vue build).
• I then moved the favicon into a new public/img folder. And although that folder with the favicon was available in the debug and production package, it was not used in the browser... Always the vue favicon showed up. My guess is: WHen vue builds the dist package it does no look for any favicon.ico file, and simply hard codes the favicon link.

I checked the index.html and the link created shows an absolute link address for a favicon icon:

<link rel=icon href=/favicon.ico><title>

After I changed the address from "/" to "./" it worked, and my favicon was shown. I could imagine there is a configuration option hidden somewhere in the config jungle, which I did not find yet ;-)

If anybody has an idea how to get vue to build a correct final (and if possible: debug) version, would be great!

Answer 2

You may also need to update the manifest for the favicons as well: /public/manifest.json.