9

How to change favicon on Vuejs CLI ?

<link rel="shortcut icon" type="image/png" href="/src/assets/img/logo.png"/>
DenisMasot
  • 697
  • 5
  • 11
  • 21
  • 2
    the favicon.ico is stored in the public folder – Andrew1325 Nov 08 '18 at 21:05
  • 1
    What about https://stackoverflow.com/questions/40190524/how-to-set-favicon-ico-properly-on-vue-js-webpack-project – Paul Rooney Nov 08 '18 at 21:07
  • 1
    Possible duplicate of [How to set favicon.ico properly on vue.js webpack project?](https://stackoverflow.com/questions/40190524/how-to-set-favicon-ico-properly-on-vue-js-webpack-project) – Chris Nov 08 '18 at 21:27

5 Answers5

12

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">
tony19
  • 125,647
  • 18
  • 229
  • 307
4
(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);
})();
Pankaj Rupapara
  • 752
  • 4
  • 9
2

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

Mahir Altınkaya
  • 407
  • 6
  • 15
0

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.

Pallav Chanana
  • 617
  • 5
  • 10
0

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!

Naomi Messing
  • 638
  • 6
  • 18