Why isn't my favicon displaying for my Vue.js project?

Question

My favicon is no longer showing in my Vue.js project (it was working for awhile). To my knowledge, I haven't changed any code related to the favicon or moved the file. Within the <head> tags of my index.html document, I link to my favicon with the following (auto-generated) line of code:

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

My favicon resides in the public directory as shown below

I've tried replacing the auto-generated line from above with all of the following to no avail:

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

I even made a vue.config.js file per the suggestion of some other forums on the topic which also didn't work

module.exports = {
  pwa: {
    iconPaths: {
      favicon32: "./public/favicon.png",
      favicon16: "./public/favicon.png",
      appleTouchIcon: "./public/favicon.png",
      maskIcon: "./public/favicon.png",
      msTileImage: "./public/favicon.png"
    }
  }
};

I've cleared my browser cache after making each change, and tried on various browsers. At this point I'm totally lost as to what could be causing this :/

Versions:

"vue": "^2.6.11",
"vuex": "^3.1.2",

What is your `<%= BASE_URL %>`.? Is this some absolute path? Basically, you only need to have relative URL's like in the other example you gave. — Marcel, Jan 27 '20 at 07:13
Can you load the favicon, when you directly browse to the expected location with the browser? — Marcel, Jan 27 '20 at 07:15

score 2 · Answer 1 · answered Jan 27 '20 at 05:18

2

See attached link i think there is some directory issue when you configure your vue project.

https://stackoverflow.com/a/40191627/12489279 enter link description here

answered Jan 27 '20 at 05:18

Swift

790
1
5
19

I tried using the static folder per that post before posting this issue and it didn't work for me. Read somewhere else that the static folder has been deprecated (wasn't in my project directory by default), so I created one myself & correctly referenced the file to no avail. – Jeremy Jan 29 '20 at 02:50
Have you do the same through webpack.config file – Swift Jan 29 '20 at 14:53

score 0 · Answer 2 · answered Jan 27 '20 at 10:00

0

I suggest using this website to generate favicons. I had some trouble with it aswell in Vuejs but that website works flawlessly. Also gives you the code you need to add in your index.html file.

answered Jan 27 '20 at 10:00

Reinier68

2,450
1
23
47

2

I already have the favicon.png file and the favicon was displaying correctly on the live site previously. At some point in the last month or two it stopped /: – Jeremy Jan 29 '20 at 02:52

Why isn't my favicon displaying for my Vue.js project?

2 Answers2