Không. SVG là định dạng đầu vào được chấp nhận, nhưng gói chứa các tệp PNG dạng raster và một tệp ICO. Công cụ không tạo favicon dạng vector hay favicon động.
Tạo favicon
Chuyển một ảnh thành tệp ZIP gồm ICO đa kích thước, năm biểu tượng PNG và một web manifest. Dùng ví dụ cài đặt bên dưới để liên kết các tệp với trang web.
Các tệp trong gói favicon
Tệp tải xuống là favicon-package.zip gồm bảy tệp. HTML được trình bày dưới dạng ví dụ cài đặt trong bài viết này, không phải tệp có trong ZIP.
| Tệp | Kích thước hoặc nội dung | Mục đích |
|---|---|---|
| favicon.ico | 16×16, 32×32 và 48×48 trong một tệp | Biểu tượng trang web đa kích thước. |
| favicon-16x16.png | 16×16 | Biểu tượng nhỏ cho trình duyệt. |
| favicon-32x32.png | 32×32 | Biểu tượng lớn hơn cho trình duyệt. |
| apple-touch-icon.png | 180×180 | Biểu tượng được tham chiếu cho màn hình chính trên thiết bị Apple. |
| android-chrome-192x192.png | 192×192 | Biểu tượng được tham chiếu trong web manifest. |
| android-chrome-512x512.png | 512×512 | Biểu tượng lớn hơn được tham chiếu trong web manifest. |
| manifest.json | Tên trang web, màu sắc và hai tham chiếu biểu tượng | Manifest ban đầu để kiểm tra và điều chỉnh cho trang web. |
Đầu vào: PNG, JPG/JPEG, WebP, GIF hoặc SVG. Đầu ra là ảnh ICO và PNG tĩnh; tải SVG lên không tạo ra favicon SVG.
Tạo và cài đặt các tệp favicon
1
Chọn ảnh nguồn dễ nhận diện
Tải lên một ảnh đơn giản. Ảnh vuông có kích thước ít nhất 512×512 điểm ảnh phù hợp cho đầu ra PNG lớn nhất; dùng ảnh lớn hơn không thể khắc phục thiết kế thiếu rõ ràng.
2
Tạo và tải tệp ZIP
Chọn Tạo gói favicon và tải tệp ZIP đã hoàn tất. Giải nén trước khi thêm các tệp vào trang web.
3
Kiểm tra manifest và triển khai các tệp
Chỉnh sửa tên trang web và màu mặc định trong manifest.json nếu cần. Đặt các tệp tại URL công khai trên trang web và cập nhật đường dẫn nếu dùng thư mục con.
4
Thêm tham chiếu HTML và kiểm tra
Dùng ví dụ bên dưới trong phần head của trang. Xác nhận các URL biểu tượng và manifest tải được, rồi kiểm tra biểu tượng trong trình duyệt.
Thêm biểu tượng vào trang web
Ví dụ này giả định các tệp được phục vụ từ thư mục gốc của trang web. Thêm các tham chiếu này vào phần head và điều chỉnh đường dẫn theo cách triển khai.
<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#ffffff">Kiểm tra các chi tiết sau trước khi đưa các tệp lên trang web:
| Nội dung kiểm tra | Việc cần làm |
|---|---|
| Đường dẫn tệp công khai | Dấu gạch chéo đầu đường dẫn chỉ thư mục gốc của trang web. Nếu dùng thư mục con, hãy cập nhật cả giá trị href trong HTML và giá trị src của biểu tượng trong manifest.json. |
| Giá trị mặc định trong manifest | Các trường name và short_name được tạo với giá trị My Website; theme_color và background_color là #ffffff. Kiểm tra lại sau khi tải xuống. Các giá trị này không đổi màu ảnh biểu tượng. |
| Cấu hình hiện có của trang web | Kiểm tra các khai báo biểu tượng khác từ giao diện hoặc framework. Tránh giữ tham chiếu đến favicon cũ cùng với cấu hình mới. |
Manifest có biểu tượng không tạo thành một ứng dụng web hoàn chỉnh có thể cài đặt hoặc hoạt động ngoại tuyến. Công cụ này không cung cấp service worker hay đảm bảo khả năng cài đặt trên mọi thiết bị.
Giữ biểu tượng rõ ràng ở kích thước nhỏ
🔎
Kiểm tra kết quả 16×16
Chữ nhỏ và đường viền mảnh có thể biến mất. Ưu tiên hình biểu trưng đơn giản, độ tương phản rõ và đủ khoảng trống quanh chủ thể.
↔
Kiểm tra hình dạng và khoảng đệm
Ảnh nguồn không vuông được đặt vừa trong khung vuông với khoảng đệm trong suốt. Ảnh nguồn nhỏ có thể được phóng lớn. Dùng ảnh vuông đã chuẩn bị sẵn nếu cần căn khung chính xác.
Chọn gói đầu ra phù hợp với công việc
Trang này tạo các tệp favicon cho trang web từ ảnh có sẵn; đây không phải công cụ vẽ logo.
Chỉ cần một tệp ICO?
Dùng PNG sang ICO để chuyển PNG sang ICO khi không cần gói tài nguyên cho trang web.
Đang xây dựng ứng dụng di động gốc?
Dùng Tạo icon ứng dụng để tạo tài nguyên ảnh cho ứng dụng iOS/Android gốc. Các tệp này phục vụ mục đích khác với favicon của trang web.
Ảnh được tải lên để xử lý trên máy chủ. Tải tệp ZIP khi sẵn sàng; các tệp tạm được dọn dẹp theo quy trình của dịch vụ.
Câu hỏi về cài đặt favicon
Trước tiên, kiểm tra URL của các tệp đã triển khai và các khai báo biểu tượng trên trang. Trình duyệt có thể lưu favicon trong bộ nhớ đệm; hãy thử một phiên trình duyệt mới sau khi xác nhận trang web trỏ đến các tệp mới.
Biểu mẫu hiện tại chỉ cho chọn ảnh. Chỉnh sửa các trường name, short_name, theme_color và background_color trong manifest đã tải xuống cho phù hợp với trang web, đồng thời giữ giá trị theme-color trong HTML nhất quán.
Không. Gói cung cấp các tệp biểu tượng và manifest ban đầu. Khả năng cài đặt và hoạt động ngoại tuyến cần cấu hình thêm cho trang web; gói không tự động bổ sung các tính năng đó.