Tạo PWA Assets - Tạo Icon & Manifest Ứng Dụng

Tạo icon PWA và manifest cục bộ trong trình duyệt. Ảnh của bạn không bao giờ rời khỏi thiết bị.

Tải lên ảnh

Kéo và thả ảnh vào đây hoặc click để chọn file

Hỗ trợ PNG/JPEG, tối thiểu 512x512px

Cấu hình Manifest

Tên Ứng Dụng

Tên Ngắn

Mô Tả

URL Khởi Động

Màu Chủ Đạo

Màu Nền

Làm tròn icon (Circle mask)

Xem trước Icons

192x192

192x192px

Android / Chrome

512x512

512x512px

Màn hình Splash

180x180

180x180px

Màn hình chính iOS

512x512

512x512px

Maskable (Thích ứng)

Xem trước Manifest

Liên kết HTML (Head)

💡 Tất cả xử lý được thực hiện trên client-side để đảm bảo quyền riêng tư và tốc độ.

PWA Asset Generator là gì?

PWA Asset Generator là công cụ miễn phí giúp bạn tạo đầy đủ assets cần thiết cho Progressive Web App (PWA) chỉ từ một hình ảnh gốc. Tool tự động tạo ra favicon.ico, apple-touch-icon, icon trong nhiều kích thước khác nhau (16x16, 32x32, 192x192, 512x512...) và file manifest.json hoàn chỉnh. Tất cả xử lý đều diễn ra trên client-side, đảm bảo tốc độ nhanh và bảo mật tuyệt đối cho hình ảnh của bạn.

Kích thước Icon PWA Chuẩn

Tool tự động tạo icon theo đúng chuẩn PWA và Apple, bao gồm:

Favicon

favicon.ico (32x32) - Icon hiển thị trên tab trình duyệt

Mobile & Tablet

192x192, 384x384, 512x512 - Icon cho Android và màn hình home

Apple Touch Icon

180x180 - Icon cho iOS khi thêm vào home screen

Đa dạng kích thước

16x16, 32x32, 48x48, 72x72, 96x96, 120x120, 144x144, 152x152, 167x167

Manifest.json - Trái tim của PWA

File manifest.json là tập tin cấu hình quan trọng nhất của PWA, chứa thông tin về:

•Tên ứng dụng (name, short_name) - Hiển thị khi cài đặt
•Icons - Danh sách tất cả icon với các kích thước và mục đích sử dụng
•Theme color - Màu chủ đạo của app bar và thanh địa chỉ
•Start URL - URL khởi động khi mở app từ home screen
•Display mode - Chế độ hiển thị (standalone, fullscreen...)

Tính năng nổi bật

Tải lên ảnh HD

Hỗ trợ PNG/JPEG với kích thước tối thiểu 512x512px để đảm bảo chất lượng tốt nhất

Tạo icon đa kích thước

Tự động resize và tạo 13+ icon sizes theo đúng chuẩn PWA và Apple guidelines

Manifest.json tự động

Sinh file manifest.json chuẩn với đầy đủ metadata và icon references

Favicon.ico

Tạo favicon.ico chuẩn cho SEO và hiển thị tab trình duyệt

Client-side Processing

100% xử lý trên trình duyệt, ảnh không upload lên server

Tải về ZIP

Đóng gói tất cả file vào một file .zip tiện lợi

Ứng dụng thực tế

PWA Development

Tạo nhanh assets cho dự án Progressive Web App, tiết kiệm hàng giờ làm thủ công

Website Branding

Tạo favicon và touch icon chuyên nghiệp cho website, tăng nhận diện thương hiệu

Mobile App Landing

Chuẩn bị assets cho trang web có thể cài đặt như native app trên mobile

Lợi ích SEO & UX

✓

Favicon tăng CTR trên SERP - Người dùng dễ nhận diện website hơn

✓

PWA tăng Core Web Vitals - Cải thiện ranking trên Google

✓

Apple Touch Icon - Trải nghiệm native khi thêm vào iOS Home Screen

✓

Manifest.json đầy đủ - Google index và hiểu rõ app của bạn

Lưu ý quan trọng

•Ảnh nguồn nên có kích thước tối thiểu 512x512px, khuyến nghị 1024x1024px
•Sử dụng ảnh có background trong suốt (PNG) để có kết quả đẹp nhất
•Tất cả xử lý diễn ra local, ảnh không bao giờ được upload lên server
•File ZIP bao gồm: favicon.ico, icons (13 sizes), manifest.json

Cách dùng công cụ Tạo Assets PWA

1
Tải lên logo PNG hoặc JPEG hình vuông, tối thiểu 512 x 512 pixel. Hình đơn giản, có chừa khoảng trống xung quanh sẽ hiển thị đẹp nhất ở kích thước nhỏ.
2
Điền các trường của manifest: tên ứng dụng, tên ngắn (hiện dưới icon trên màn hình chính), mô tả, URL khởi động, màu chủ đề và màu nền.
3
Bật mặt nạ hình tròn nếu muốn icon tròn, rồi xem bản xem trước cho Android, iOS, màn hình chờ và icon maskable.
4
Bấm Generate & Download để tải file ZIP gồm mọi kích thước icon và manifest.json. Sao chép các thẻ link HTML hiển thị bên dưới vào phần <head> của website.

Ví dụ thực tế

Cho phép cài đặt website

Chrome và Edge chỉ hiện nút "Cài đặt ứng dụng" khi có manifest hợp lệ với icon 192 và 512 pixel. Bộ file tạo ra đáp ứng đủ yêu cầu này.

Icon màn hình chính trên iOS

Safari bỏ qua icon trong manifest và dùng apple-touch-icon. File ZIP có sẵn icon 180 x 180 cùng thẻ link tương ứng.

Icon maskable cho Android

Android cắt icon thành hình tròn, squircle hay vuông bo góc tùy thiết bị. Icon maskable giữ logo trong vùng an toàn nên không bao giờ bị cắt mất.

Đổi nhận diện thương hiệu nhanh

Khi đổi logo, chỉ cần tải file mới một lần để thay cả bộ icon, thay vì xuất cả chục kích thước bằng tay từ công cụ thiết kế.

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

Web app manifest là gì?+

manifest.json là file JSON nhỏ cho trình duyệt biết tên, icon, màu sắc và URL khởi động của ứng dụng web. Nhờ nó website có thể được cài đặt và mở như ứng dụng gốc.

Thật sự cần những kích thước icon nào?+

Để cài đặt được, Chrome yêu cầu tối thiểu icon 192 x 192 và 512 x 512. iOS dùng apple-touch-icon 180 x 180. Các kích thước khác giúp một số launcher và thiết bị cũ hiển thị sắc nét hơn.

theme_color và background_color khác nhau thế nào?+

theme_color tô màu thanh công cụ trình duyệt và trình chuyển ứng dụng. background_color là màu nền màn hình chờ khi ứng dụng đang tải, nên trùng với nền của màn hình đầu tiên.

Hình ảnh của tôi có bị tải lên không?+

Không. Việc đổi kích thước và tạo file ZIP dùng Canvas API ngay trong trình duyệt, nên logo chưa công bố và tài sản thương hiệu không rời khỏi máy bạn.