Як правильно встановити favicon.ico у проекті webpack vue.js?

Question 1

Я створив vue webpackпроект за допомогою vue-cli.

vue init webpack myproject

А потім запустив проект у devрежимі:

npm run dev

Я отримав цю помилку:

Не вдалося завантажити ресурс: сервер відповів статусом 404 (не знайдено) http: // localhost: 8080 / favicon.ico

Тож як всередині webpack, як правильно імпортувати favicon.ico?

Question 2

Перегляньте структуру проекту шаблону веб- пакета: https://vuejs-templates.github.io/webpack/structure.html

Зверніть увагу , що є статична папка, разом з node_modules, srcі так далі

Якщо ви помістите якесь зображення в staticпапку, наприклад favicon.png, воно стане доступним за адресою http: // localhost: 8080 / static / favicon.png

Ось документація щодо статичних активів: https://vuejs-templates.github.io/webpack/static.html

Що стосується вашої проблеми із значками, ви можете вставити favicon.icoабо favicon.pngв staticпапку та вказати у <head>своєму index.html наступним чином:

<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" type="image/png" href="/static/favicon.png"/>
    <title>My Vue.js app</title>
    ...
</head>

Якщо ви не вказали a favicon.icoу своєму index.html, тоді браузер запитує значок із кореневої сторінки веб-сайту (поведінка за замовчуванням). Якщо ви вкажете значок, як зазначено вище, ви більше не побачите цього 404. Фавікон також почне відображатися на вкладках вашого браузера.

Як додаткову примітку, ось причина, чому я віддаю перевагу PNG, а не файлу ICO:

favicon.png проти favicon.ico - чому я повинен використовувати PNG замість ICO?

Question 3

Невелике оновлення для Laravel 5.x, розмістіть його favicon.icoабо favicon.pngв /publicпапці та зверніться до нього у вашому index.htmlфайлі так:

<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" type="image/png" href="/favicon.png"/>
    <title>My Vue.js app</title>
    ...
</head>

Сподіваюся, це допоможе!

Question 4

З якихось причин вищевказані рішення не працювали для мене до перетворення favicon.icoфайлу за замовчуванням favicon.pngта перейменовування на favicon-xyz.pngнапр. (Я помістив цей файл у /publicпапку) та редагували index.htmlфайл наступним чином:

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="icon" href="<%= BASE_URL %>favicon-xyz.png">
    .
    .
    .
</head>

Може бути для когось корисним.