'How to change Vuestic Admin theme favicon

How to change the favicon in the Vuestic Admin theme? I looked up the index.js file, but it did not specify the path of the favicon.

page/public/favicon.ico

page/public/index.js

<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
vue.js


Solution 1:[1]

You can just replace default favicon in public folder: https://github.com/epicmaxco/vuestic-admin/blob/master/public/favicon.ico The browser will pick it up by default.

If you want to use png, put your image inside public folder and add it to index template:

https://github.com/epicmaxco/vuestic-admin/blob/master/public/index.html

<link rel="shortcut icon" type="image/png" href="favicon.png" />

Hope this helps!

Solution 2:[2]

  1. You can replace the path tag to text or image as below
    <template>
      <svg
        class="va-icon-vuestic"
        :height="height"
        viewBox="0 0 478 60"
        fill="none"
        xmlns="http://www.w3.org/2000/svg">
        <text x="0" y="50" font-size="50px" fill="url(#paint0_linear)">your logo
        </text>
    
        <defs>
          <linearGradient
            id="paint0_linear"
            x1="0"
            y1="56.1386"
            x2="357.64"
            y2="56.1386"
            gradientUnits="userSpaceOnUse"
          >
            <stop :stop-color="colorsComputed.end"/>
            <stop offset="1" :stop-color="colorsComputed.start"/>
          </linearGradient>
        </defs>
      </svg>
    </template>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 jean moldovan
Solution 2

Related Questions