kéo thả, nhấp vào đây hoặc dán từ clipboard

Thả để thêm

Chuyển PNG sang ICO — tạo favicon cho website chỉ vài bước

Favicon là chi tiết nhỏ nhưng không thể thiếu: biểu tượng nhỏ xuất hiện trên tab trình duyệt, trong bookmark, trên màn hình điện thoại khi người dùng lưu shortcut. Trình duyệt yêu cầu định dạng ICO cho <code>favicon.ico</code> vì file ICO có thể nhúng sẵn nhiều kích thước (16×16, 32×32, 48×48) trong một file duy nhất — trình duyệt tự chọn kích thước phù hợp.

Enhydra RPO chuyển PNG của bạn thành file ICO hợp lệ ngay trong trình duyệt, không cần tải Photoshop plugin hay công cụ command-line. Tải lên PNG logo của bạn và nhận favicon.ico sẵn sàng đặt vào thư mục root website.

ICO có gì khác so với chỉ đổi đuôi file?

Đây là lầm tưởng phổ biến: bạn không thể chỉ đổi tên file.png thành file.ico và mong nó hoạt động. File ICO có cấu trúc container đặc biệt chứa một hoặc nhiều ảnh nhúng bên trong, mỗi ảnh ở kích thước khác nhau.

Khi trình duyệt cần hiển thị favicon trên tab (16×16 hoặc 32×32), nó đọc ICO và chọn phiên bản gần nhất với kích thước cần. Nếu file ICO của bạn chỉ có phiên bản 256×256, trình duyệt phải scale down — kết quả thường mờ và không sắc nét. Một favicon ICO tốt nhúng nhiều kích thước để trình duyệt luôn có phiên bản tối ưu.

Chuẩn bị ảnh PNG trước khi chuyển sang ICO

Để có favicon đẹp, ảnh PNG đầu vào cần đáp ứng một vài điều kiện:

Nền trong suốt: nền trong suốt cho phép favicon hòa vào bất kỳ màu nền tab nào (sáng hoặc tối). PNG với nền trắng cứng sẽ trông lạc lõng trên tab có giao diện tối.
Hình vuông: favicon hiển thị trong khung vuông, vì vậy logo hình chữ nhật nên được crop hoặc thêm padding trước khi chuyển đổi.
Đơn giản: ở 16×16 pixel, chi tiết nhỏ sẽ biến mất. Logo đơn giản, tương phản cao hoạt động tốt nhất.

Nếu PNG của bạn chưa đúng kích thước, xếp thêm công cụ Đổi kích thước và Crop trước công cụ Chuyển định dạng — tất cả xử lý trong một lần.

Đặt favicon vào website sau khi chuyển đổi

Sau khi có file favicon.ico, bước tiếp theo là đặt đúng chỗ:

Đổi tên file thành favicon.ico và đặt vào thư mục gốc (root) của website — cùng cấp với index.html.
Thêm thẻ sau vào phần <code><head></code> của HTML:
<code><link rel="icon" href="/favicon.ico"></code>
Để hỗ trợ iOS và Android tốt hơn, cũng thêm phiên bản PNG 192×192 và 512×512 với thẻ <code>apple-touch-icon</code> và manifest.json.

Trình duyệt cache favicon khá hung hăng — nếu không thấy favicon mới sau khi deploy, hãy hard refresh (Ctrl+Shift+R) hoặc xóa cache trình duyệt.

FAQ

Kích thước PNG đầu vào nên là bao nhiêu để làm favicon đẹp?

Nên dùng PNG ít nhất 256×256, tốt nhất là 512×512 hoặc hơn. Công cụ sẽ scale down xuống các kích thước nhỏ hơn — ảnh đầu vào to hơn cho kết quả sắc nét hơn ở kích thước nhỏ.

ICO tạo ra có nhúng nhiều kích thước không?

Có, file ICO đầu ra nhúng sẵn các kích thước phổ biến để trình duyệt có thể chọn kích thước phù hợp nhất cho từng ngữ cảnh hiển thị.

Nền trong suốt của PNG có được giữ lại trong ICO không?

Có, nếu PNG gốc có nền trong suốt, file ICO đầu ra cũng có nền trong suốt tương ứng.

Tôi có thể dùng ảnh JPG thay vì PNG làm đầu vào không?

Được, Enhydra RPO nhận JPG và hầu hết định dạng ảnh phổ biến. Tuy nhiên JPG không có nền trong suốt — favicon của bạn sẽ có nền trắng. Nên dùng PNG có nền trong suốt để có kết quả tốt nhất.