Поменять favicon Vuejs?

Question

Как изменить favicon на CLI Vuejs?

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

Answer 1

Vue CLI (3.0.5) генерирует проекты с <root>/public каталог, содержащий favicon.ico а также index.html (который ссылается на favicon.ico).

Кажется, у вас есть значок в <root>/src/assets, Я рекомендую переместить его в <root>/public, заменяя favicon.ico с jinane-logo-JC.png и обновление index.html соответственно:

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

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.stackru.com/favicon.ico';
    document.getElementsByTagName('head')[0].appendChild(link);
})();

Answer 3

Если вы используете vue cli2, поместите ваш fovicon в статические файлы и измените <link rel="shortcut icon" type="image/png" href="static/jinane-logo-JC.png"/> или вы используете vue cli3, поместите ваше изображение favicon в публичный файл и измените его в index.html публично <link rel="icon" href="<%= BASE_URL %>jinane-logo-JC.png">

Answer 4

Следуй этим шагам: -

1. Скопируйте желаемый значок в общую папку в проекте Vue.
2. Зайдите в свой проект и найдите index.html

3. Найдите тег ссылки для значка и замените имя youlogohere на имя вашего логотипа

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

4. Запустить проект и значок изменены.

Answer 5

Вы должны использовать пакет vue-head

Добавьте этот код в свой App.vueфайл:

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

удачи!

Answer 6

Если вы используете vue-cli 3 с плагином pwa, у меня это сработало.

Найдите статью здесь

Вы можете прочитать о веб-манифестах здесь