Trình tạo favicon

Biến bất kỳ logo hay ảnh nào thành một bộ favicon hoàn chỉnh: favicon.ico đa kích thước, apple-touch-icon, biểu tượng Android/ứng dụng web và một đoạn HTML sẵn sàng để dán. Chọn hình vuông, bo tròn hoặc tròn, thêm khoảng đệm hoặc màu nền, rồi tải toàn bộ gói xuống dưới dạng ZIP. Mọi thứ được tạo cục bộ trong trình duyệt của bạn — ảnh của bạn không bao giờ đượ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.

Trình tạo favicon của PixelVault biến bất kỳ ảnh nào thành một bộ biểu tượng hoàn chỉnh cho website và ứng dụng mà không tải lên bất cứ thứ gì. Hầu hết các trang "trình tạo favicon" đều bắt bạn gửi logo lên máy chủ của họ trước khi nhận lại được dù chỉ một biểu tượng. Ở đây, mọi tệp — favicon.ico đa độ phân giải, các biểu tượng PNG và tệp manifest — đều được tạo ra ngay bên trong trình duyệt của bạn, nên hình ảnh thương hiệu của bạn không bao giờ rời khỏi thiết bị.

Một trang web hiện đại cần nhiều hơn một biểu tượng. Trình duyệt đọc một tệp favicon.ico nhỏ cho thanh địa chỉ và các thẻ, iOS cần một apple-touch-icon 180×180 cho màn hình chính, còn Android và PWA dùng các tệp PNG 192 và 512px được tham chiếu từ một web manifest. PixelVault tạo tất cả cùng lúc từ một ảnh nguồn duy nhất và trao cho bạn một đoạn HTML sẵn sàng để dán, nên việc gắn chúng vào chỉ mất vài giây.

Bạn kiểm soát cách biểu tượng hiển thị. Giữ nó là hình vuông đơn giản, bo tròn các góc, hoặc cắt thành hình tròn; thêm khoảng đệm để một wordmark không bị dồn sát mép; và chọn nền trong suốt hay nền đặc. Bản xem trước trực tiếp cho thấy kết quả ở đúng các kích thước favicon thật — kể cả một thẻ trình duyệt mô phỏng — nên bạn biết chính xác khách truy cập sẽ thấy gì trước khi tải xuống.

Cách hoạt động

Khi bạn thêm một ảnh, trình duyệt giải mã nó vào bộ nhớ và PixelVault vẽ lại nó lên các canvas vuông ở mỗi kích thước biểu tượng, áp dụng mặt nạ hình dạng, khoảng đệm và nền bạn đã chọn. Mỗi canvas được mã hóa sang PNG bằng bộ mã hóa tích hợp sẵn của trình duyệt, và các tệp PNG 16, 32 và 48px được gói vào một tệp favicon.ico duy nhất (định dạng chứa PNG-trong-ICO được hỗ trợ rộng rãi). Logo SVG được raster hóa cục bộ ở độ phân giải cao trước, nên các biểu tượng luôn sắc nét.

Vì sao xử lý cục bộ quan trọng

Tạo biểu tượng cục bộ nghĩa là logo của bạn — thường là bộ nhận diện chưa công bố — không bao giờ bị truyền đi, lưu trữ hay ghi nhật ký bởi một dịch vụ bên thứ ba. Nó cũng diễn ra tức thì: không tải lên, không hàng chờ và không vòng tải xuống, và nó vẫn hoạt động ngoại tuyến sau khi trang đã tải. Thứ bạn tải xuống chính xác là thứ trình duyệt của bạn tạo ra, không có gì được thêm vào.

Định dạng được hỗ trợ

  • ICO — Tệp favicon.ico đa độ phân giải (16/32/48px) cho các thẻ và thanh địa chỉ.
  • PNG — Apple-touch-icon (180px) và biểu tượng Android/PWA (192 và 512px).
  • SVG — Chỉ làm đầu vào — logo vector được raster hóa cục bộ để có biểu tượng sắc nét nhất.
  • JPG / WebP — Được chấp nhận làm ảnh nguồn bên cạnh PNG.

Trường hợp sử dụng phổ biến

  • Tạo favicon.ico và biểu tượng ứng dụng cho một website hoặc trang đích mới.
  • Chuyển logo PNG hoặc SVG thành một tệp ICO đa kích thước đúng chuẩn.
  • Tạo apple-touch-icon và các biểu tượng web manifest cho một PWA.
  • Làm mới bộ favicon của một thương hiệu mà không phải giao logo cho một dịch vụ trực tuyến.

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.