Change favicon Vuejs?

Question

How to change favicon on Vuejs CLI ?

<link rel="shortcut icon" type="image/png" href="/src/assets/img/logo.png"/>

Vigilant

the favicon.ico is stored in the public folder – Arvonio

What about #40191024 – Ship

Possible duplicate of How to set favicon.ico properly on vue.js webpack project? – Fecula

Answer 1

Vue CLI (3.0.5) generates projects with the <root>/public directory containing the favicon.ico and index.html (which references the favicon.ico).

It seems you have your icon in <root>/src/assets. I recommend moving it to <root>/public, replacing favicon.ico with jinane-logo-JC.png, and updating index.html accordingly:

<!-- <link rel="icon" href="<%= BASE_URL %>favicon.ico"> --> <!-- REPLACE THIS -->
<link rel="icon" href="<%= BASE_URL %>jinane-logo-JC.png">

Yestreen

Answer 2

(function() {
    var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
    link.type = 'image/x-icon';
    link.rel = 'shortcut icon';
    link.href = 'http://www.stackoverflow.com/favicon.ico';
    document.getElementsByTagName('head')[0].appendChild(link);
})();

Rella

Answer 3

if you are using vue cli2, put your fovicon in static files and change <link rel="shortcut icon" type="image/png" href="static/jinane-logo-JC.png"/> or you are using vue cli3, put your favicon image in public file and change it in index.html in public <link rel="icon" href="<%= BASE_URL %>jinane-logo-JC.png">

Monofilament

Answer 4

Follow these Steps : -

1. Copy your desired favicon in public folder in Vue project.
2. Go to your project and look for index.html

3. Find link tag for icon & replace name of "youlogohere" to your logo name

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

4. Run Project and Icon changed.

Waitress

Answer 5

You shold use vue-head package

Add this code in your App.vue file:

  export default {
    head: {
       link: [
             {
                 rel: "icon",
                 href: require("./assets/logo.png")
             },
          ]
       }
   }

goodluck!

Distress