Cách sử dụng
- Thả tệp .ico vào vùng thả, nhấp để chọn tệp hoặc dán ảnh.
- Chọn Giữ định dạng gốc để mọi kích thước lưu trong biểu tượng đều có trong đầu ra.
- Kiểm tra dung lượng sau mã hóa; một biểu tượng chứa nhiều kích thước có thể lớn hơn bạn nghĩ.
- Sao chép data URI cho thẻ link favicon, hoặc sao chép đầu ra thẻ img, CSS hay Markdown.
Định dạng ICO
ICO là định dạng biểu tượng của Windows và là định dạng favicon đầu tiên. Đây là một dạng container: một thư mục ngắn liệt kê một hoặc nhiều ảnh kèm chiều rộng, chiều cao và độ sâu màu, và mỗi ảnh được lưu dưới dạng dữ liệu bitmap hoặc, với kích thước lớn như 256 x 256, dưới dạng PNG nhúng bên trong. Một tệp favicon.ico thông thường chứa các phiên bản 16, 32 và 48 điểm ảnh để trình duyệt chọn bản sắc nét nhất.
Kiểu MIME đã đăng ký là image/vnd.microsoft.icon, nhưng image/x-icon phổ biến hơn nhiều, và trình duyệt chấp nhận cả hai. Dữ liệu ICO ở dạng Base64 bắt đầu bằng AAABAA, tức phần đầu tệp đã được mã hóa.
Favicon dạng data URI
<link rel="icon" href="data:image/x-icon;base64,AAABAAEAEBA...">Nhúng trực tiếp favicon rất tiện cho các tài liệu HTML một tệp như báo cáo được xuất ra, bảng điều khiển lưu xuống ổ đĩa và tài liệu ngoại tuyến, cũng như cho bản mẫu hoặc công cụ nội bộ mà bạn không muốn triển khai thêm một tệp riêng. Với trang web có nhiều trang, một tệp /favicon.ico bình thường thường tốt hơn: tệp chỉ tải một lần và được lưu đệm, còn data URI bị lặp lại trong mọi phản hồi HTML.
Nếu bạn hoàn toàn không muốn có biểu tượng, <link rel="icon" href="data:,"> sẽ ngăn trình duyệt yêu cầu /favicon.ico.
Favicon ICO, PNG hay SVG
Các trình duyệt hiện nay cũng chấp nhận favicon PNG và SVG, ví dụ <link rel="icon" type="image/png" href="data:image/png;base64,...">. Một ảnh PNG 32 x 32 duy nhất thường nhỏ hơn một tệp ICO nhiều kích thước; với các trường hợp đó, hãy dùng PNG sang Base64 hoặc SVG sang Base64.
Khi chuyển một tệp ICO sang PNG, JPEG hoặc WebP tại đây, chỉ một ảnh được giữ lại, đó là ảnh mà trình duyệt chọn để hiển thị. Để làm theo chiều ngược lại và tạo tệp ICO, hãy mã hóa một ảnh PNG rồi dán kết quả vào Base64 sang ICO, công cụ này tạo biểu tượng từ 16 đến 256 điểm ảnh.
Câu hỏi thường gặp
Nên dùng image/x-icon hay image/vnd.microsoft.icon?
image/vnd.microsoft.icon là kiểu được đăng ký chính thức, còn image/x-icon là kiểu mà hầu hết các trang web sử dụng. Nếu một hệ thống yêu cầu một kiểu cụ thể, hãy sửa tiền tố sau khi sao chép.Mọi kích thước biểu tượng có được giữ trong đầu ra Base64 không?
Có, khi bạn giữ định dạng gốc. Toàn bộ tệp được mã hóa, nên trình duyệt vẫn chọn được kích thước cần dùng. Khi chuyển sang định dạng khác, chỉ một ảnh được giữ lại.
Favicon dạng data URI có hoạt động trên mọi trình duyệt không?
Các trình duyệt máy tính hiện nay hiển thị chúng trên tab. Dấu trang, lối tắt trên màn hình chính và một số trình duyệt cũ có thể bỏ qua biểu tượng nhúng, nên các trang web công khai vẫn nên cung cấp tệp favicon.