CODEWITHSUNDEEP
vue.jsvuejs2vuexfaviconvercel
jeremy
jeremy

Reputation: 89

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

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

enter image description here

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",

Upvotes: 0

Views: 3402

Answers (2)

Reinier68
Reinier68

Reputation: 3292

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.

Upvotes: 0

Swift
Swift

Reputation: 820

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

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

Upvotes: 2

Related Questions