7

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.

Alex Webster
  • 707
  • 1
  • 6
  • 21
  • 1
    Also vue-cli mounts the entire public-folder to / during a serve, check there. Actually it is a `new CopyWebpackPlugin({ from: public, to: dist, ignore:['index.html'] }` if we are being specific. – ippi Jun 11 '18 at 15:19

4 Answers4

3

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!

hnuecke
  • 137
  • 1
  • 9
  • I had the same problem, so I just remove "dist" folder and made "build" again. And that's work now. – Vlad Jul 10 '19 at 13:02
3

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

Arajay
  • 552
  • 6
  • 7
2

You can treat it like a common image, and the builder will compile the ico as normal image. The ico will certainly be incorporated in the compiled code, because it is light. So if your index.html is in src at the same level as the img directory :

  • proj/src/index.html
  • proj/src/img/favicon.ico

You will have in the index.html :

 <link href='./img/favicon.png' rel="icon" Atype="image/x-icon" />

Or you can just add it directly in the public or dist (where the project is built) directory, as it is and remove the favicon tag of your index.html.

If it doesn't work, then you might have to look webpack config ...

I use vue-cli 3.0.0-beta.15 and create my project with : 

vue create proj

and the favicon is under public directory :

  • proj/public/favicon.ico
Lucile Fievet
  • 509
  • 5
  • 9
  • Lucile you are probably correct, but this does not appear to be the case for the vue-cli webpack template which has a different structure to that which you describe. Putting the favicon in the root makes no differnce when running `npm run dev` – Alex Webster Jun 11 '18 at 19:08
0

I encountered this issue when deploying webapp to azure. I have a dotnet core 3.1 api service up vue through VueCliMiddleware package. In index.html the original code is

<link rel="icon" href="<%= BASE_URL %>favicon.ico">

adding a "." before the BASE_URL variable syntax fixes this on both local and azure.

<link rel="icon" href=".<%= BASE_URL %>favicon.ico">

Thank you to the above and below answers for guidance!

Serving favicon.ico in ASP.NET MVC How to replace %PUBLIC_URL% in react app on an azure website

Carlos Soriano
  • 669
  • 6
  • 6