Trình tạo biểu tượng yêu thích
Các trình duyệt yêu cầu nhiều kích thước biểu tượng: favicon.ico 16×16 cổ điển, biểu tượng tab 32×32, biểu tượng apple-touch 180×180 và biểu tượng PWA 192×192. Tải lên một biểu tượng hình vuông và tải xuống một bộ hoàn chỉnh — được tạo cục bộ mà không cần gửi tài sản thương hiệu của bạn đến máy chủ.
Cách tạo favicon
1. Tải lên hình vuông PNG hoặc JPG (khuyến nghị 512×512 hoặc lớn hơn).
2. Xem trước các kích thước đã tạo.
3. Tải xuống gói biểu tượng hoặc các tệp riêng lẻ.
4. Thêm thẻ liên kết vào đầu HTML của bạn và đặt các tệp trong /public hoặc root trang web.
Thiết lập favicon ví dụ
Trang web tĩnh mới
Tạo favicon.ico cộng với 32×32 PNG và thêm thẻ liên kết tiêu chuẩn rel="icon" vào bố cục.html.
Bảng kê khai PWA
Xuất PNG 192×192 và 512×512 cho mảng biểu tượngManifest.json.
Đặt lại thương hiệu swap
Thay thế một logo chính và tạo lại tất cả các kích thước để các tab và lối tắt trên màn hình chính khớp nhau.
Khi nào nên dùng trình tạo favicon
• Khi khởi chạy một trang web và cần tất cả các kích thước biểu tượng tiêu chuẩn cùng một lúc.
• Khi bạn có biểu tượng raster nhưng không có tệp .ico nhiều kích thước.
• Khi bạn muốn tạo cục bộ mà không cần tải lên tài sản thương hiệu.
Thời điểm tạo biểu tượng thủ công
• Khi biểu trưng của bạn được trình bày chi tiết — hãy đơn giản hóa thành dấu chữ cái để có mức độ dễ đọc 16×16.
• Khi biểu tượng SVG đủ cho khán giả hiện đại.
• Khi các cửa hàng trên nền tảng yêu cầu các nguồn PSD phân lớp được chỉ định nghiêm ngặt.
thẻ liên kết HTML danh sách kiểm tra
Bao gồm rel="icon" cho kích thước PNG, rel="apple-touch-icon" cho iOS và tùy chọnManifest.json cho PWA. Đặt tệp tại các đường dẫn có thể dự đoán được (/favicon.ico vẫn giúp ích cho các trình thu thập dữ liệu cũ).
Thiết kế dành cho 16×16
Các chi tiết nhỏ sẽ biến mất ở kích thước favicon. Sử dụng hình dạng đậm, độ tương phản cao và tránh nét mỏng. Nhiều thương hiệu sử dụng các biến thể chữ lồng cho kích thước nhỏ.
Xóa bộ nhớ đệm khi đổi thương hiệu
Trình duyệt lưu vào bộ nhớ đệm favicon một cách tích cực. Đổi tên tệp hoặc thêm truy vấn ?v=2 khi cập nhật biểu tượng để người dùng nhìn thấy dấu mới.
Câu hỏi thường gặp
Hình ảnh nguồn phải có kích thước bao nhiêu?
Hình vuông có kích thước tối thiểu là 512×512 px. Các biểu tượng chính lớn hơn có khả năng thu nhỏ tốt hơn so với việc nâng cấp các biểu tượng nhỏ.
ICO và PNG favicon?
Các trình duyệt hiện đại chấp nhận PNG; .ico gói nhiều kích thước cho các tab Windows cũ.
kích thước biểu tượng Apple-touch?
180×180 px cho các phím tắt trên màn hình chính iOS — sử dụng PNG không có độ trong suốt để có kết quả tốt nhất.
Nền trong suốt?
Hoạt động cho các tab PNG; Biểu tượng trang chủ iOS có thể có màu trắng mờ — thử nghiệm trên thiết bị.
Các biểu tượng có được tải lên máy chủ không?
Không — việc thay đổi kích thước sử dụng canvas cục bộ.
Nguồn SVG?
Trước tiên, hãy chuyển đổi SVG sang PNG ở độ phân giải cao, sau đó tạo favicon.