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

Я создал проект vue webpack, используя vue-cli.

vue init webpack myproject

И затем выполнил проект в режиме dev:

npm run dev

Я получил эту ошибку:

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

Итак, внутри webpack, как правильно импортировать favicon.ico?

Ответ 1

Проверьте структуру проекта шаблона 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 - почему я должен использовать PNG вместо ICO?

Ответ 2

Небольшое обновление для 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>

Надеюсь, это поможет!

Ответ 3

Для меня работает BASE_URL внутри href. Примерно так

<link rel="icon" href="<%= BASE_URL %>favicon.ico">