.ico vẫn là định dạng được mong đợi ở thư mục gốc trang web, và phần lớn công cụ chuyển đổi trực tuyến yêu cầu tải ảnh lên máy chủ. Sau đây là cách tạo favicon.ico nhiều kích thước đúng chuẩn từ PNG mà không tải bất cứ thứ gì lên.
.ico không chỉ là ảnh được đổi tên
Đổi tên logo.png thành favicon.ico là chưa đủ. ICO là định dạng chứa với phần đầu riêng: mô tả số lượng ảnh, kích thước và vị trí bắt đầu của từng ảnh trong tệp. PNG đổi tên không có phần đầu đó, và các trình duyệt kiểm tra nghiêm ngặt sẽ từ chối hiển thị.
ICO đúng chuẩn chứa nhiều độ phân giải của cùng một biểu tượng. Trình duyệt đọc phần đầu, chọn phiên bản gần nhất với kích thước cần dùng và không phải phóng to ảnh.
Chuyển PNG sang ICO qua ba bước
Bước một, chuẩn bị ảnh nguồn. PNG vuông ít nhất 512×512 pixel cho kết quả tốt nhất vì mọi kích thước đều được tạo bằng cách thu nhỏ. Nếu ảnh có nền trong suốt, hãy quyết định có giữ lại không: rất phù hợp cho thẻ trình duyệt, nhưng iOS và Android sẽ thay bằng màu đen.
Bước hai, tạo các độ phân giải. Tệp nên chứa ít nhất 16×16, 32×32 và 48×48. Khi đổi kích thước phải dùng bộ lọc lấy mẫu lại chất lượng cao, nếu không các bản nhỏ sẽ khó nhận diện.
Bước ba, đóng gói. Ba ảnh được ghép vào một tệp ICO, với phần đầu mô tả từng mục. Đặt kết quả ở thư mục gốc trang web với tên favicon.ico, nơi trình duyệt tìm được ngay cả khi không có thẻ HTML.
Vì sao chuyển đổi ngay trên thiết bị lại quan trọng?
Phần lớn công cụ chuyển PNG sang ICO tải tệp lên máy chủ để xử lý rồi gửi kết quả về. Logo của bạn, thường còn chưa ra mắt công khai, nằm trên một máy bạn không kiểm soát, theo chính sách lưu giữ mà bạn chưa đọc.
Trong khi đó, trình duyệt hiện đại tự làm được tất cả: giải mã PNG, đổi kích thước trên canvas, mã hóa lại từng kích thước và ghép thành tệp ICO. LFFavicon làm đúng như vậy. Không yêu cầu nào mang theo ảnh của bạn, và đóng thẻ sẽ xóa mọi thứ.
Lợi ích rất thực tế: chuyển đổi tức thì, dùng được ngoại tuyến sau khi trang tải xong, không phải xếp hàng và không giới hạn số lần mỗi ngày.
Chỉ .ico thôi không còn đủ
Chuyển PNG sang ICO đáp ứng thẻ và ứng dụng cũ, nhưng còn bỏ sót ba ngữ cảnh: trình duyệt hiện đại ưu tiên SVG sắc nét ở mọi kích thước, màn hình chính iOS cần PNG 180×180 không trong suốt và Android đọc web manifest.
Vì đã xử lý ảnh, hãy tạo cả bộ trong một lần. Đó là điều công cụ thực hiện: một ảnh nguồn tạo ra .ico, SVG, biểu tượng Apple Touch và các biểu tượng manifest, kèm bản xem trước từng ngữ cảnh trước khi tải xuống.
Nguồn chính thức
Câu hỏi thường gặp
Cần PNG kích thước nào để tạo ICO?
Ảnh vuông ít nhất 512×512 pixel. Dưới 128×128, các kích thước lớn trong gói phải được phóng to nên kết quả sẽ mờ. SVG còn tốt hơn vì không có giới hạn độ phân giải.
Độ trong suốt có được giữ trong .ico không?
Có, định dạng ICO hỗ trợ kênh alpha đầy đủ và PNG trong suốt vẫn giữ độ trong suốt trên thẻ. Tuy nhiên, lưu ý biểu tượng iOS: hệ thống tô đen vùng trong suốt, nên hãy thêm nền.
Nên đặt favicon.ico ở đâu?
Ở thư mục gốc tên miền, truy cập được tại https://yoursite.com/favicon.ico. Theo quy ước, trình duyệt và trình thu thập dữ liệu yêu cầu đúng địa chỉ này ngay cả khi không có thẻ link khai báo.