Làm thế nào để đặt favicon.ico đúng cách trên dự án webpack vue.js?

Question 1

Tôi đã tạo một vue webpackdự án bằng cách sử dụng vue-cli.

vue init webpack myproject

Và sau đó chạy dự án ở devchế độ:

npm run dev

Tôi gặp lỗi này:

Không thể tải tài nguyên: máy chủ phản hồi với trạng thái 404 (Không tìm thấy) http: // localhost: 8080 / favicon.ico

Vậy bên trong webpack, làm thế nào để nhập favicon.icođúng?

Question 2

Kiểm tra Cấu trúc dự án của mẫu webpack: https://vuejs-templates.github.io/webpack/osystem.html

Lưu ý rằng có một thư mục tĩnh, cùng với node_modules, srcvv

Nếu bạn đặt một số hình ảnh vào staticthư mục, chẳng hạn như favicon.png, nó sẽ được cung cấp tại http: // localhost: 8080 / static / favicon.png

Đây là tài liệu về nội dung tĩnh: https://vuejs-templates.github.io/webpack/static.html

Đối với vấn đề biểu tượng yêu thích của bạn, bạn có thể đặt một favicon.icohoặc favicon.pngvào staticthư mục và tham khảo trong <head>index.html của bạn như sau:

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

Nếu bạn không xác định a favicon.icotrong của mình index.html, thì trình duyệt sẽ yêu cầu biểu tượng yêu thích từ thư mục gốc của trang web (hành vi mặc định). Nếu bạn chỉ định biểu tượng yêu thích như trên, bạn sẽ không thấy 404 đó nữa. Biểu tượng yêu thích cũng sẽ bắt đầu hiển thị trong các tab trình duyệt của bạn.

Lưu ý thêm, đây là lý do tại sao tôi thích PNG thay vì tệp ICO:

favicon.png và favicon.ico - tại sao tôi nên sử dụng PNG thay vì ICO?

Question 3

Cập nhật nhỏ cho Laravel 5.x, đặt của bạn favicon.icohoặc favicon.pngvào /publicthư mục và tham khảo nó trong index.htmlnhư sau:

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

Hy vọng nó giúp !

Question 4

Vì một số lý do, các giải pháp trên không hoạt động đối với tôi trước khi chuyển đổi favicon.icotệp mặc định thành favicon.pngvà đổi tên nó thành favicon-xyz.pngví dụ: (Tôi đã đặt tệp này vào /publicthư mục) và chỉnh sửa index.htmltệp như sau:

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

Có thể hữu ích cho ai đó.