Làm thế nào để thay đổi favicon Angular CLI

Làm cách nào tôi có thể thay đổi favicon mặc định được đặt bởi Angular CLI?

Tôi đã thử nhiều thứ, nhưng nó luôn hiển thị logo Angular là favicon, mặc dù tôi đã xóa biểu tượng đó (favicon.ico trong thư mục src). Nó vẫn hiển thị và tôi không biết nó được tải từ đâu.

Tôi đã thay thế biểu tượng đó bằng một biểu tượng khác, nhưng nó vẫn hiển thị logo Angular:

<link rel="icon" type="image/x-icon" href="favicon.ico">

Tạo một hình ảnh png có cùng tên ( favicon.png) và thay đổi tên trong các tệp này:

index.html:

<link rel="icon" type="image/x-icon" href="favicon.png" />

angular-cli.json:

"assets": [
    "assets",
    "favicon.png" 
],

Và bạn sẽ không bao giờ thấy biểu tượng mặc định góc cạnh nữa.

Kích thước nên là 32x32, nếu nhiều hơn nó sẽ không hiển thị.

LƯU Ý: Điều này sẽ không hoạt động với Angular 9

Đối với góc 9, bạn phải đặt favicon vào trong tài sản, sau đó đưa ra đường dẫn như

<link rel="icon" type="image/x-icon" href="assets/favicon.png">

Vì bạn đã thay thế favicon.icotệp vật lý, phải có một vấn đề lưu trữ ở đâu đó. Có một bộ đệm trong trình duyệt của bạn. Buộc nó bị xóa bằng cách nhấn Ctrl+ F5.

Nếu biểu tượng mặc định vẫn được hiển thị, hãy thử một trình duyệt khác có bộ đệm sạch (nghĩa là bạn chưa truy cập trang với trình duyệt đó).

Xóa các phím tắt bộ đệm: ( Nguồn )

Windows
IE: Ctrl+ R; Firefox: Ctrl+ Shift+ R; Chrome: Ctrl+ R, hoặc Ctrl+ F5hoặc Shift+ F5.

Mac
Safari: ⌘+ R; Firefox / Chrome: ⌘+ Shift+ R.

Điều hướng đến tập tin cuối cùng đã sửa lỗi này cho tôi. Trong trường hợp của tôi: http: // localhost: 4200 / favicon.ico

Tôi đã cố gắng làm mới, dừng và bắt đầu ng servelại và "Cache trống và tải lại cứng", không có gì hoạt động.

Đảm bảo trình duyệt tải xuống phiên bản mới của favicon và không sử dụng phiên bản được lưu trong bộ nhớ cache, bạn có thể thêm một tham số giả vào url favicon:

<link rel="icon" type="image/x-icon" href="favicon.ico?any=param">

chúng ta có thể thay đổi biểu tượng favicon CLI góc cạnh. chúng ta phải đặt tệp biểu tượng vào thư mục "tài sản" và đưa đường dẫn đó vào index.html.

<link rel="icon" type="image/x-icon" href="./assets/images/favicon.png"> Đó là công việc của tôi.

Tôi cũng đang vật lộn với điều này, nghĩ rằng tôi đã làm gì đó không ổn với Angular, nhưng vấn đề của tôi cuối cùng là Chrome lưu trữ biểu tượng. Tiêu chuẩn "Bộ nhớ cache trống và tải lại cứng" hoặc khởi động lại trình duyệt không hoạt động với tôi, nhưng bài đăng này đã chỉ cho tôi đi đúng hướng.

Điều này đặc biệt làm việc cho tôi:

Nếu trên windows và sử dụng chrome, (exit chrome from taskbar) thì hãy chuyển đến C:\Users\your_username\AppData\Local\Google\Chrome\User Data\Default và xóa các tệp Favicons-Tạp chí, Favicons sau đó khởi động lại chrome (từ thanh tác vụ, kill all instances).

Có rất nhiều đề xuất tốt khác trong bài đăng đó nếu điều này không phù hợp với bạn.

Đối với Angular 6, đặt favicon.pngkích thước 32x32vào thư mục tài sản và thay đổi đường dẫn trong index.html. Sau đó,

<link rel="icon" type="image/x-icon" href="./assets/favicon.png">

Tạo một hình ảnh biểu tượng với phần mở rộng .ico và sao chép và thay thế nó bằng tệp favicon mặc định trong thư mục src.

index.html:

<link rel="icon" type="image/x-icon" href="favicon.ico" />

angular.json:

**"assets": [
          "src/favicon.ico",
          "src/assets"
        ],**

Di chuyển favicon.ico vào tài sản của bạn và sau đó vào thư mục img và sau đó chỉ thay đổi thẻ liên kết biểu tượng của bạn trong tiêu đề. Nó giúp tôi khi favicon hoàn toàn không hiển thị.

Nhấn Ctrl+ F5trong cửa sổ trình duyệt

ĐỂ LIÊN QUAN ĐẾN FAVICON CHO MỌI DỰ ÁN WEB:

Nhấp chuột phải vào favicon và nhấp vào 'tải lại'. Hoạt động mọi lúc.

Đối với những người đọc trong tương lai, nếu điều này xảy ra với bạn, trình duyệt của bạn muốn sử dụng favicon đã lưu trong bộ nhớ cache cũ.

Thực hiện theo các bước sau:

1. Giữ CTRL và nhấp vào nút "Làm mới" trong trình duyệt của bạn.
2. Giữ phím Shift và nhấp vào nút "Làm mới" trong trình duyệt của bạn.

Đã sửa.

Vui lòng làm theo các bước dưới đây để thay đổi biểu tượng ứng dụng:

1. Thêm tệp .ico của bạn trong dự án.
2. Truy cập angular.json và trong đó "dự án" -> "kiến trúc sư" -> "xây dựng" -> "tùy chọn" -> "tài sản" và ở đây tạo một mục nhập cho tệp biểu tượng của bạn. Tham khảo mục hiện có của favicon.ico để biết cách thực hiện.

3. Truy cập index.html và cập nhật đường dẫn của tệp biểu tượng. Ví dụ,

4. Khởi động lại máy chủ.

5. Trình duyệt làm mới cứng và bạn tốt để đi.

Tôi đã chơi xung quanh với điều này một chút. Hóa ra favicon rõ ràng được xử lý bởi một mô-đun nút có tên @scapes (ít nhất là trong Angular5).

Bạn có thể thay đổi favicon của mình trong thư mục này:

[YourProjectName]\node_modules\@schematics\angular\application\files\__sourcedir__

Trong thư mục đó nên có một favicon.ico, đó là một cái đã được tải. Tôi khá shure điều này không áp dụng cho tất cả mọi người nhưng nó đã làm việc cho tôi.

Hy vọng điều này sẽ giúp. Chúc mừng mã hóa! : D

Đối với những người cần một favicon được thêm động ở đây là những gì tôi đã làm với trình khởi chạy ứng dụng:

import { APP_INITIALIZER, FactoryProvider } from '@angular/core'

export function faviconInitFactory () {

 return () => {
  const link: any = document.querySelector(`link[rel*='icon']`) || document.createElement('link')
  link.type = 'image/x-icon'
  link.rel = 'shortcut icon'

  if (someExpression) {
    link.href = 'url' || 'base64'
  } else {
    link.href = 'url' || 'base64'
  }

  document.getElementsByTagName('head')[ 0 ].appendChild(link)
}

}

export const FAVICON_INIT_PROVIDER: FactoryProvider = {
  provide: APP_INITIALIZER,
  multi: true,
  useFactory: faviconInitFactory,
  deps: []
}

Chỉ cần xóa tệp fav.ico trong src / và thêm tệp này. Favicon sẽ được thêm vào trước khi bắt đầu ứng dụng

<link rel="icon" type="image/x-icon" href="#">

Thêm nguồn biểu tượng của bạn và khởi động lại ứng dụng, nó sẽ thay đổi.

Tôi đã thử nhiều giải pháp trong số đó nhưng không thành công. Một trong những hoạt động cho ứng dụng 5 góc của tôi là dưới đây:

index.html: Nhận xét thẻ liên kết của bạn

 <!-- <link rel="icon" type="image/png" href="src/assets/images/favicon.ico"> --> 

.angular-cli.json: để loại vật phẩm là ".ico"

 "assets": [
      "assets",
      "favicon.ico"
    ],

Cuối cùng ..

• Trong cấu trúc thư mục dự án của bạn, có favicon.ico bên trong src ex: (C: \ Dev \ EPS \ src). Bạn KHÔNG cần phải có nó trong thư mục tài sản của bạn vì bạn không tham chiếu nó.

• Đảm bảo biểu tượng của bạn không bị hỏng (Biểu tượng của bạn phải dễ đọc nếu được xem qua cửa sổ explorer aka không có biểu tượng cửa sổ bị hỏng)

• phải có kích thước 32 x 32

Đảm bảo rằng khi bạn sử dụng hình ảnh biểu tượng, nó không bị thao tác mở rộng, như nếu bạn tải xuống một pnghình ảnh và sau đó thay đổi thủ công phần mở rộng của nó từ pngsangicon . Trong trường hợp này, hình ảnh của bạn sẽ bị hỏng. Và trình duyệt không hiểu.

Tôi đã làm sai, nhưng sau khi sử dụng hình ảnh biểu tượng ban đầu, nó bắt đầu hoạt động.

1.Kiểm tra thẻ liên kết của bạn trên tệp index.html rằng nó sẽ trông như thế này.

<link red="icon" type="image/x-icon" href="favicon.ico">

2.Kiểm tra tên tệp của thư mục favicon.ico trong thư mục / src.

3.Rerun Angular với ng phục vụ và làm mới ứng dụng.

4.Nếu nó không hiển thị (hoặc một cái gì đó trông giống như nó đệm tập tin favicon.ico cũ). hãy thử làm mới đường dẫn của favicon một lần nữa để tải tệp favicon.ico (ví dụ: refresh yourdomain.com/favicon.ico)

Tôi đã từng gặp vấn đề tương tự.

Nếu bạn đang sử dụng máy Mac, bạn sẽ cần làm trống Cache ( Option+ ⌘+ E) và tải lại trang ngoài việc khởi động lại ứng dụng (và tất nhiên là thay đổi đường dẫn trong index.html).

1. Xóa favicon.ico hiện tại của bạn
2. Thêm biểu tượng mới vào thư mục src có tên là "favico.ico"
3. Xóa Cache trong trình duyệt của bạn.

Biểu tượng không phản ánh chỉ vì bộ nhớ cache của trình duyệt của bạn. Đôi khi thử khởi động lại ứng dụng

Các bước sau làm việc cho tôi.

1. Xóa tệp "favicon.ico" mặc định bằng một tệp mới có tên khác, ví dụ "_favicon.ico" trong trường hợp của tôi.

   Lưu ý :: Không giữ tên mặc định, vì nó được lưu trong bộ nhớ cache trong trình duyệt của bạn và khó ghi đè bằng biểu tượng mới.

2. Cập nhật index.html bằng thẻ liên kết mới tức là

    <link rel="icon" type="image/x-icon" href="_favicon.ico" /> 
   

3. Cập nhật .angular-cli.json với tên biểu tượng mới, tức là "_favicon.ico".

4. Xây dựng và khởi chạy ứng dụng của bạn và làm mới Ctrl+ F5.

đơn giản và dễ dàng như:

1. thêm biểu tượng hoặc png của bạn trong cùng thư mục với favicon
2. chỉnh sửa .angular-cli.json, trong tài sản, hãy xóa favicon.ico để đặt bạn vào vị trí
3. chỉnh sửa index.html, tìm kiếm favicon và đặt bạn vào vị trí
4. chạy lại phục vụ

đã xong

<link rel="icon" type="image/x-icon" href="assets/liana.jpg">

"assets": [

        "assets/sorry.jpg",
        "assets/liana.jpg"

  ],

Điều này làm việc cho tôi.

Trong trường hợp của tôi, vấn đề là tôi có kích thước khác so với bình thường. Tôi đã có 48x48 pxtrong khi nó đang mong đợi 32x32 pxvà phần mở rộng của tôi là png vì vậy tôi phải đổi nó thànhico

Điều thực sự hiệu quả với tôi là đưa favicon của tôi vào thư mục tài sản và tự động xuất hiện trong trình duyệt.

1. thay đổi vị trí thành thư mục tài sản trong thư mục src.
2. thay đổi index.html như thế này <link rel="icon" type="image/x-icon" href="assets/favicon.png">

Ok, ở đây vào năm 2020 vào ngày 9.1.12. Tôi không hiểu tại sao chính xác quá trình này rất khó khăn. Tôi đã theo dõi hầu hết các bài viết ở trên và không ai trong số họ làm việc cho tôi.

Những gì DID hoạt động là thế này: Hoàn toàn loại bỏ tham chiếu favicon trong index.html. Nó hoàn toàn phản trực quan nhưng nó hoạt động. Bạn không cần phải đặt nó trongassets thư mục. Tôi đã thử tất cả những điều đó nhưng thật không may, không có gợi ý nào trong số đó được thực hiện.

index.html

<!-- <link rel="icon" type="image/x-icon" href="favicon.ico"> DELETE THIS -->

angular.json

"assets": [
  "src/favicon.ico",
  "src/assets"
],

và khi tôi chạy ng build --prod, favicon ở đó. Hiển thị trên máy chủ trực tiếp của tôi quá.

Xóa bộ đệm favicon cache và khởi động lại trình duyệt trên mac làm việc cho tôi.

rm ~/Library/Application\ Support/Google/Chrome/Default/Favicons

Tôi đã có cùng một vấn đề và đã giải quyết nó bằng cách buộc làm mới phương thức được mô tả ở đây :

Để làm mới favicon của trang web của bạn, bạn có thể buộc các trình duyệt tải xuống phiên bản mới bằng cách sử dụng thẻ liên kết và chuỗi truy vấn trên tên tệp của bạn. Điều này đặc biệt hữu ích trong môi trường sản xuất để đảm bảo người dùng của bạn nhận được bản cập nhật.

<link rel="icon" href="http://www.yoursite.com/favicon.ico?v=2" />

Tôi đã khắc phục sự cố bằng cách tạo tệp .ico của riêng mình và tạo thư mục tài sản và đặt tệp ở đó. Sau đó thay đổi link href trong Index.html