Công Cụ Tạo Icon PWA — Tạo Icon Progressive Web App
Tạo đầy đủ kích thước icon PWA (72×72 đến 512×512) kể cả maskable icon cho manifest.json. Miễn phí, xử lý 100% trên trình duyệt, không upload ảnh.
Tại Sao Dùng Công Cụ Này?
Progressive Web App (PWA) cần icon ở nhiều kích thước để hỗ trợ cài đặt trên các nền tảng khác nhau — Android, iOS, Windows và Chrome desktop dùng các kích thước khác nhau. Đúng các kích thước này đảm bảo PWA có thể được cài đặt từ trình duyệt và xuất hiện với icon chính xác trên màn hình chính và app drawer của người dùng.
Bảng Kích Thước Icon PWA (2026)
| Kích Thước (pixel) | Mục Đích | Ghi Chú |
|---|---|---|
| 512×512 | Bắt buộc | Màn hình splash, cửa hàng |
| 384×384 | Khuyến nghị | Splash mật độ cao |
| 192×192 | Bắt buộc | Màn hình chính, Android |
| 152×152 | Khuyến nghị | Màn hình chính iPad |
| 144×144 | Khuyến nghị | Windows tile |
| 128×128 | Khuyến nghị | Trình duyệt Chrome |
| 96×96 | Khuyến nghị | Mật độ chuẩn |
| 72×72 | Khuyến nghị | Mật độ thấp |
Bảo Mật — Xử Lý 100% Trên Trình Duyệt
Ảnh của bạn được xử lý hoàn toàn trong trình duyệt bằng HTML5 Canvas API. Không có gì được upload lên server. Bạn có thể kiểm chứng bằng cách ngắt kết nối internet sau khi tải trang — công cụ vẫn hoạt động offline.
Mẹo: Với maskable icon, giữ mọi nội dung quan trọng (logo, văn bản, hình ảnh chính) trong 80% bên trong canvas — vòng tròn 72% inset. 20% bên ngoài có thể bị cắt bởi hình dạng icon thiết bị. Bạn có thể dùng icon riêng biệt: một icon thường và một maskable icon, cả hai ở 192×192 và 512×512.
Mẹo Cho Icon PWA
- Maskable icon cần thiết kế cẩn thận — đặt logo trong 80% trung tâm (460px bên trong canvas 512px) và lấp đầy toàn bộ nền với màu thương hiệu. Nền lấp đầy các góc hiển thị khi hệ điều hành cắt icon.
- Cài đặt manifest.json — tham chiếu icon với trường
purpose:{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any maskable" }. - 192×192 và 512×512 là hai kích thước quan trọng nhất. Bao gồm tối thiểu những kích thước này. Chrome kiểm tra 192px cho lời nhắc cài đặt và 512px cho màn hình splash.
- Chỉ định dạng PNG — trình duyệt không hỗ trợ icon SVG trong manifest.json (tính đến 2026). Luôn xuất dạng PNG.
- Kiểm tra cài đặt PWA trên cả Android Chrome và iOS Safari (Add to Home Screen) để xác minh giao diện icon trên các nền tảng.