Tạo favicon ICO đa kích thước không cần rời trình duyệt

Favicon ICO nên chứa gì

favicon.ico cổ điển nhúng nhiều độ phân giải để tab, bookmark và shortcut sắc nét trên màn Retina. Chỉ gửi 16×16 mờ rồi phóng to trông lỗi thời.

WebP.Best có các gói Favicon (16/32/48), Standard (thêm 64) và Full (tối đa 256) để đáp ứng trình duyệt và Windows phổ biến mà không phải thiết kế từng cỡ bằng tay.

• Tab trình duyệt → kích thước nhỏ trong gói Favicon
• Shortcut / một số bề mặt OS → Standard hoặc Full
• Ảnh nguồn → nên là logo hoặc biểu tượng vuông, rõ nét

Chuẩn bị ảnh nguồn

Bắt đầu từ master vuông hoặc gần vuông, cạnh sạch. PNG hoặc WebP trong suốt rất hợp. Ảnh chụp quá rối làm icon 16 px yếu — hãy đơn giản hóa hoặc cắt vào biểu tượng trước.

Nếu logo chỉ là wordmark ngang, khi ép vuông sẽ có viền hoặc bị cắt. Quyết định icon là biểu tượng hay monogram trước khi chuyển đổi.

Các bước trên WebP.Best

Mở bộ chuyển đổi trên trang chủ và thêm file logo (PNG hoặc WebP trong suốt là tốt nhất). Định dạng đầu ra: ICO.

Chọn gói kích thước: Favicon (16/32/48 px) cho tab; Standard thêm 64 px cho shortcut; Full lên 256 px cho icon Windows sắc hơn. Không cần xuất từng cỡ — gói gom vào một .ico.

Chọn cách lấp vuông: Fit inside giữ toàn bộ logo với lề nếu nguồn không vuông; Fill and crop phóng to lấp đầy và có thể cắt mép — phù hợp biểu tượng đơn giản hơn chữ nhỏ.

Chuyển đổi, tải .ico, rồi kiểm tra cỡ nhỏ nhất trên tab. Mọi thứ chạy cục bộ trên thiết bị của bạn.

Fit inside vs fill and crop: chọn gì

Hãy coi icon như khung vuông. Fit inside thu nhỏ logo cho vừa khung — không cắt gì, nhưng logo rộng hoặc cao có thể còn dải trống.

Fill and crop phóng to lấp khung rồi cắt phần thừa. Tốt với hình tròn hoặc chữ đơn; rủi ro với wordmark dài mất chữ ở 16 px.

Cần master vuông chặt trước ICO? Mở Tùy chọn nâng cao, chọn Chiều rộng × cao chính xác (vd. 512×512), Fill and crop hoặc Fit inside, chuyển PNG một lần rồi chạy ICO trên file vuông đó. Nếu gói mặc định đã ổn, bỏ qua bước này.

• Chỉ wordmark ngang → Fit inside, hoặc thiết kế biểu tượng vuông trước
• Icon tròn kiểu app → Fill and crop thường gọn hơn
• Không chắc → thử Fit inside trước; chuyển Fill and crop khi lề trông lạ

Dùng ICO trên website

Đặt favicon.ico ở thư mục gốc site hoặc liên kết trong HTML head với type phù hợp. Nhiều host tĩnh cũng nhận favicon PNG; ICO vẫn hữu ích cho bookmark cũ và một số ngữ cảnh desktop.

Sau khi deploy, hard refresh hoặc cửa sổ ẩn danh: trình duyệt cache favicon rất mạnh. Icon «sai» sau khi tải lên thường là cache, không phải ICO hỏng.

Những gì công cụ không làm

Luồng này dành cho icon tĩnh. Không thiết kế thương hiệu, không tự xóa nền hay tạo SVG. Nét quá mảnh có thể mất ở 16 px — hãy thử cỡ nhỏ nhất.

Gói chạy cục bộ với bộ kích thước cố định. Nếu cần icon «Thêm vào màn hình chính» trên điện thoại, có thể cần PNG riêng — một ICO đôi khi chưa đủ.