Trình tạo biểu tượng PWA
Tạo những biểu tượng mà một web app cài đặt được cần — ảnh PNG 192 và 512px cùng một tệp site.webmanifest — từ một ảnh duy nhất, hoàn toàn trong trình duyệt.
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.
Những biểu tượng khiến ứng dụng cài đặt được
Một progressive web app được đánh giá là cài đặt được một phần nhờ biểu tượng của nó: trình duyệt tìm một web manifest khai báo ít nhất một ảnh PNG 192×192 và một ảnh 512×512 trước khi đề xuất cài đặt hay đặt một biểu tượng tử tế lên màn hình chính. Trình tạo này kết xuất cả hai từ ảnh nguồn của bạn và viết ra một tệp site.webmanifest tham chiếu tới chúng, cùng với apple-touch-icon mà iOS cần và một favicon.ico cho các thẻ thông thường.
Tạo hình cho trình khởi chạy
Trình khởi chạy trên Android có thể cắt biểu tượng thành hình tròn hay vuông bo góc, nên phần hình chạy sát mép có thể bị cắt mất. Thêm khoảng đệm và một nền đơn sắc ở đây thì phần quan trọng vẫn nằm trong vùng an toàn dù mặt nạ nào được áp; bản xem trước trực tiếp cho thấy kết quả ở từng kích thước. Mọi thứ được kết xuất trên thiết bị của bạn bằng Canvas API — logo của bạn không bao giờ bị tải lên — và trọn bộ được tải xuống dưới dạng tệp zip.
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.