CODEWITHSUNDEEP
javascriptvue.jssingle-page-applicationvue-routerfavicon
Richard Franek
Richard Franek

Reputation: 302

Favicon doesn't show in Vue.js variable routes

I have my favicon set in the index.html of my Vue webpack SPA. It works when I go to the index site or to basically any normal route, it doesn't work however when I use a route that is variable (path: "/traduzione/:translation")

I've searched for this issue on google without finding any relevant results. I tried clearing my cache as well as trying the same on a different PC, it also happens both on my development localhost and on my production address.

I believe this is all the relevant code in order to reproduce my issue

index.html

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

router/index.js

  routes: [
    { path: "/", name: "Quote", component: Quote },
    { path: "/traduzione/:translation", name: "Traduzione", component: Landing },
    { path: "*", component: PageNotFound }
  ]

(There is no metadata related code in the Landing component)

I need my favicon functional in the variable routes as well of course, it doesn't really make sense to me why it wouldn't work, every component uses index.html which has the favicon inside, so why would there be a problem like this?

Upvotes: 2

Views: 466

Answers (1)

Richard Franek
Richard Franek

Reputation: 302

In the end I solved this myself, I was long trying to figure it out and short after posting this I got an idea.

When a link looks like "static/favicon.png", then that's fine as long as there is just 1 route. In the variable routes we have 2 (route/:route) and then it appends the link behind it.

So it was searching my favicon in localhost:8080/traduzione/favicon.png instaed of localhost:8080/favicon.png.

This was fixed by adding a slash at the start of the link ("/static/favicon.png").

Upvotes: 2

Related Questions