Я создал проект vue webpack используя vue-cli.Как правильно настроить favicon.ico на проекте vue.js webpack?
vue init webpack myproject
И побежал проект под dev режиме:
npm run dev
Я получил эту ошибку:
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8080/favicon.ico
Так внутри WebPack, как правильно импортировать favicon.ico?
Заканчивать структуры проекта шаблона WebPack: 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, вы можете положить 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>
Если вы не определите favicon.ico в вашем index.html, то браузер будет запрашивать значок из корня веб-сайта (поведение по умолчанию). Если вы укажете значок, как указано выше, вы больше не увидите этого 404. Значок также начнет отображаться на вкладках вашего браузера.
В качестве примечания, вот причина, почему я предпочитаю PNG вместо ICO файла:
favicon.png vs favicon.ico - why should I use PNG instead of ICO?
Вы пробовали просто сбросив его в корень сайта? :) Или в общедоступной папке? – Benjamin