Những kích thước nào được tạo ra?

16×16, 32×32, 48×48 (gộp trong favicon.ico), 180×180 (Apple Touch Icon), 192×192 và 512×512 (biểu tượng PWA).

Độ trong suốt có được giữ lại không?

Có. Kênh alpha của PNG được giữ lại trong mọi tệp đầu ra, kể cả định dạng ICO.

Sự khác biệt giữa favicon.ico và biểu tượng PNG là gì?

favicon.ico gộp nhiều kích thước vào một tệp để hỗ trợ các trình duyệt cũ, còn biểu tượng PNG được trình duyệt hiện đại và PWA sử dụng. Cung cấp cả hai đảm bảo khả năng tương thích tối đa.

Ảnh nguồn tốt cần như thế nào?

Một tệp PNG vuông nền trong suốt từ 512×512 pixel trở lên cho kết quả tốt nhất khi thu nhỏ xuống các kích thước biểu tượng nhỏ hơn.

Làm thế nào để thêm favicon vào trang web của tôi?

Thêm <link rel="icon" href="/favicon.ico"> và <link rel="apple-touch-icon" href="/apple-touch-icon.png"> vào <head> của HTML.

ImageStream

FLEXEAM · MEMETALKHơn cả lời nói. Đậm chất riêng của bạn.Không cần giải thích. Vào chơi thôi.Khám phá không cần đăng ký →AD

Tạo Favicon

Chuyển PNG sang favicon.ico và gói đa kích thước

Favicon là biểu tượng nhỏ hiển thị trên các tab trình duyệt, dấu trang và màn hình chính của thiết bị di động. Tải lên một tệp PNG và tạo ngay một gói biểu tượng nhiều kích thước hoàn chỉnh, tương thích với mọi trình duyệt và thiết bị.

Cách tạo favicon

1Tải lên ảnh PNG (nên dùng nền trong suốt)
2Chọn các kích thước biểu tượng bạn cần
3Tải gói ZIP và thêm vào trang web của bạn

Mẹo và trường hợp sử dụng favicon

Trang web — tương thích giữa các trình duyệt

Để hiển thị đúng trên Chrome, Safari, Firefox và Edge, hãy cung cấp cả favicon.ico lẫn các tệp PNG. Tải toàn bộ tệp trong ZIP đã tạo lên thư mục gốc của trang web và thêm các thẻ link tương ứng vào head của HTML.

PWA / màn hình chính di động

Với Ứng dụng web tiến bộ và lối tắt trên màn hình chính, bạn cần PNG 192×192 và 512×512. Đăng ký cả hai kích thước trong mảng icons của manifest.json để hiển thị biểu tượng độ phân giải cao trên Android và iOS.

Nhận diện thương hiệu — logo làm biểu tượng

Chỉ cắt biểu tượng hoặc dấu hiệu của logo thành PNG vuông trước khi chuyển thành favicon. Giữ thiết kế đơn giản — nó phải nhận diện được ngay cả ở kích thước 16×16 pixel.