Tóm tắt (TL;DR)
- Đa dạng đầu vào: Chuyển đổi PNG, JPG, WebP hoặc SVG thành bộ favicon hợp lệ.
- Kích thước thông minh: Chọn giữa “Cover” (Cắt đầy) hoặc “Contain” (Thêm viền) để vừa vặn hoàn hảo với khung vuông.
- Chuẩn Production: Không chỉ tạo 1 file, mà tạo tổ hợp
favicon.ico+ PNGs cần thiết cho tương thích web hiện đại.
Tại sao cần công cụ chuyên biệt?
Bạn không thể chỉ đổi tên logo.png thành favicon.ico. Định dạng ICO là một container chứa nhiều ảnh raster ở các kích thước khác nhau. Trình duyệt cần điều này để chọn phiên bản nét nhất.
Công cụ này xử lý sự phức tạp kỹ thuật:
- Resampling: Bộ lọc giảm kích thước chất lượng cao (Lanczos3) để tránh icon 16x16 bị mờ.
- Đóng gói Container: Gộp phiên bản 16x16, 32x32, và 48x48 vào một file nhị phân
.ico. - Modern Fallbacks: Tạo ảnh PNG chuẩn (192x192, 512x512) cho Android, PWA và màn hình độ phân giải cao.
Cắt ảnh thông minh: Cover vs Contain
Hầu hết logo hình chữ nhật, nhưng favicon phải là hình vuông.
1. Cover (Cắt đầy)
- Cơ chế: Phóng to ảnh cho đến khi lấp đầy khung vuông. Các cạnh thừa sẽ bị cắt.
- Phù hợp cho: Biểu tượng, monogram, hoặc icon gần vuông.
2. Contain (Vừa khít)
- Cơ chế: Thu nhỏ ảnh để nằm gọn trong khung vuông, thêm khoảng trống (padding) trong suốt.
- Phù hợp cho: Logo dạng chữ dài hoặc hình cao không thể cắt bớt.
Pro Tip: Nếu logo của bạn là dạng chữ dài, đừng cố nhét nó vào khung 16x16. Nó sẽ không đọc được. Hãy tạo một biến thể rút gọn (icon/ký tự đầu) cho thương hiệu.
Hiểu về định dạng ICO
File .ico rất độc đáo. Khác với PNG là 1 ảnh, ICO là một thư mục chứa ảnh.
- 16x16: Icon tab chuẩn trên desktop.
- 32x32: Dùng cho màn hình Retina và taskbar shortcut.
- 48x48: Dùng bởi Windows cho desktop icons.
Thực hành tốt nhất
- Bắt đầu với ảnh lớn: Upload ảnh ít nhất 512x512 pixels.
- Kiểm tra tương phản: Đảm bảo logo nhìn rõ trên cả nền sáng và tối.
- Trong suốt là chìa khóa: Dùng PNG hoặc SVG trong suốt. Nền trắng nhìn rất lỗi thời trên các tab trình duyệt dark mode.
FAQ
Tại sao favicon của tôi bị mờ?
Ở mức 16x16 pixels, bạn chỉ có 256 chấm màu. Chi tiết phức tạp sẽ biến mất. Giải pháp là dùng thiết kế đơn giản hơn.
Tôi dùng mỗi file PNG được không?
Hầu hết trình duyệt hiện đại hỗ trợ, nhưng các công cụ cũ vẫn tìm favicon.ico. An toàn nhất là cung cấp cả hai.