[Vuejs]-Changing the logo displayed in the tabs browser don't work in vuejs 3

0👍

Static assets (files under public/) are served from the base URL, so your href URL should not include public/. Also it looks like the icon is in public/img/icons, but your href does not specify the icons subdirectory.

Assuming a Vue CLI scaffolded project, your href should look like this:

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

0👍

On your folder structure print screen I seen that your index.html file is under the same folder as your favicon.png (/public/img/icons/), so the Vue will create automatically a brand new index.html for you and all changes that you make in your index.html will be ignored.

To fix this problem you will need to put your index.html in the root of your public folder (will be /public/index.html), and use the path <%= BASE_URL %>img/icons/favicon.png in your favicon import (<link rel="icon" href="<%= BASE_URL %>img/icons/favicon.png">)

Leave a comment