Cách sử dụng
- Dán chuỗi Base64 hoặc data URI của một biểu tượng, hoặc của ảnh bạn muốn biến thành biểu tượng.
- Kiểm tra bản xem trước và kích thước. Ảnh nguồn hình vuông cho biểu tượng sắc nét nhất.
- ICO đã được chọn sẵn. Ở mục Kích thước biểu tượng, chọn một kích thước (16, 32, 48, 64, 128 hoặc 256 điểm ảnh) hoặc Nhiều kích thước (16, 32, 48, 256).
- Tải xuống tệp .ico. Nếu đầu vào đã là ICO và bạn muốn giữ nguyên mọi ảnh bên trong, hãy chọn Bản gốc.
Tệp ICO dạng Base64
Tệp ICO là một container nhỏ: một header, một thư mục các mục và mỗi mục một ảnh, mỗi ảnh được lưu dưới dạng dữ liệu BMP hoặc PNG. Header bắt đầu bằng các byte 00 00 01 00, nên Base64 của một biểu tượng bắt đầu bằng AAABAA. Bạn sẽ gặp biểu tượng Base64 trong data URI của favicon như <link rel="icon" href="data:image/x-icon;base64,...">, trong các trang HTML một tệp và trong những API trả về biểu tượng của trang web.
Kiểu MIME đã đăng ký là image/vnd.microsoft.icon, nhưng image/x-icon phổ biến hơn nhiều và hoạt động ở mọi nơi.
Nên chọn kích thước biểu tượng nào
| Kích thước | Mục đích sử dụng thường gặp |
|---|---|
| 16 × 16 | Thẻ trình duyệt và dấu trang trên màn hình thông thường |
| 32 × 32 | Thẻ trình duyệt trên màn hình mật độ điểm ảnh cao |
| 48 × 48 | Biểu tượng trên màn hình nền Windows và trong Explorer |
| 64, 128 | Bản xem trước lớn hơn và danh sách ứng dụng |
| 256 × 256 | Chế độ xem biểu tượng lớn và rất lớn trên Windows |
Tùy chọn nhiều kích thước đóng gói 16, 32, 48 và 256 vào một tệp, để mỗi hệ thống có thể chọn bản phù hợp nhất. Các ảnh bên trong được nén dạng PNG, giúp giữ độ trong suốt và được Windows Vista trở về sau cùng mọi trình duyệt hiện đại hỗ trợ.
Dùng biểu tượng làm favicon
Trình duyệt tự động yêu cầu /favicon.ico từ thư mục gốc của trang web, nên chỉ cần lưu tệp ở đó là được, kể cả khi không có đoạn mã nào. Một data URI Base64 trong href giúp bớt yêu cầu đó, nhưng khi ấy biểu tượng bị tải lại cùng mọi trang thay vì được lưu đệm riêng. Các trình duyệt hiện đại cũng chấp nhận biểu tượng PNG và SVG, và một cách thiết lập phổ biến là kết hợp cả hai:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">Hãy bắt đầu từ một ảnh vuông có hình dạng đơn giản và độ tương phản cao; chi tiết nhỏ sẽ biến mất ở kích thước 16 điểm ảnh. Để có phiên bản PNG cho mục đích khác, hãy thử Base64 sang PNG.
Câu hỏi thường gặp
Tệp favicon.ico nên có kích thước bao nhiêu?
Một biểu tượng nhiều kích thước chứa các ảnh 16, 32 và 48 điểm ảnh là đủ cho trình duyệt và Windows. Tùy chọn nhiều kích thước ở đây còn thêm cả 256 cho chế độ xem biểu tượng lớn.
Tôi có thể chuyển PNG hoặc SVG dạng Base64 sang ICO không?
Có. Hãy dán vào, giữ ICO ở mục Tải xuống dạng và chọn kích thước. Mọi ảnh mà trình duyệt của bạn hiển thị được đều có thể chuyển đổi.
Vì sao bản xem trước chỉ hiện một kích thước của biểu tượng?
Tệp ICO có thể chứa nhiều ảnh, nhưng bản xem trước chỉ hiển thị một trong số đó. Hãy tải xuống dạng Bản gốc để giữ mọi ảnh trong tệp.
Tệp ICO có giữ được độ trong suốt không?
Có. Các biểu tượng được lưu dưới dạng dữ liệu PNG với kênh alpha đầy đủ, nên góc bo tròn và cạnh mềm vẫn trong suốt.