SVG sang favicon

Biến một logo SVG thành trọn bộ favicon — favicon.ico, apple-touch-icon và biểu tượng web app — được kết xuất sắc nét ngay trong trình duyệt. Không có gì được tải lên.

Quyền riêng tư là trên hết: mỗi hình ảnh được xử lý cục bộ trong trình duyệt của bạn. Không có gì được tải lên, lưu trữ hay truyền đến bất kỳ máy chủ nào.

Vào là vector, ra là mọi cỡ raster

SVG là nguồn favicon lý tưởng: nó không phụ thuộc độ phân giải, nên mỗi cỡ biểu tượng có thể được kết xuất từ hình học gốc thay vì lấy mẫu lại từ một bitmap vốn đã nhỏ. Thả tệp SVG của bạn vào và mỗi bản xuất — 16, 32, 48, 180, 192 và 512 pixel — đều được vẽ từ vector ở đúng kích thước của nó, giữ cho các mép sắc nét thay vì nhòe nhoẹt. Đó chính là khác biệt giữa một biểu tượng trông có chủ đích trên thẻ và một vết mờ.

Vì sao bạn vẫn cần tệp .ico

Trình duyệt hiện đại sẵn sàng dùng thẳng favicon dạng SVG, nhưng các trình duyệt cũ và vô số công cụ khác — trình đọc feed, bộ hiển thị liên kết trong ứng dụng chat, lối tắt trên màn hình nền — vẫn tìm favicon.ico. Tạo cả hai từ cùng một tệp SVG là bao trọn mọi trường hợp. Thêm khoảng đệm, chọn mặt nạ vuông, bo tròn hay hình tròn cùng một nền, rồi tải trọn bộ kèm đoạn mã HTML sẵn sàng dán vào.

Câu hỏi thường gặp

Ảnh của tôi có bị tải lên để tạo favicon không?
Không. Tệp favicon.ico, các biểu tượng PNG và tệp manifest đều được tạo cục bộ trong trình duyệt bằng Canvas API. Ảnh của bạn không bao giờ rời khỏi thiết bị.
Tôi nhận được những kích thước và tệp nào?
Một tệp favicon.ico đa độ phân giải (16, 32 và 48px), các biểu tượng PNG ở 16, 32, 48, 180 (apple-touch-icon), 192 và 512px, một tệp site.webmanifest, cùng một đoạn HTML để dán vào <head> của bạn.
Tôi có thể chuyển PNG hoặc SVG sang ICO không?
Có. Thả vào một tệp PNG, JPG, SVG hoặc WebP và tải xuống một tệp favicon.ico thực thụ. Logo SVG được raster hóa cục bộ ở độ phân giải cao trước.
Ảnh nào cho kết quả tốt nhất?
Một ảnh vuông với logo đơn giản, tương phản cao. Ảnh không vuông sẽ được cắt theo tâm cho vừa; hãy dùng các tùy chọn khoảng đệm và hình dạng để căn khung theo ý bạn.
Tôi cài đặt favicon như thế nào?
Giải nén gói vào thư mục gốc của trang web và dán đoạn HTML được cung cấp vào <head> của các trang. Tệp favicon.ico được hầu hết trình duyệt tự động nhận ra.