Chuyển đến nội dung

Tạo icon ứng dụng iOS và Android

Biến một ảnh thành đủ kích thước icon iOS, Android, PWA và favicon, kèm asset catalog cho Xcode và lớp adaptive icon, đóng gói ZIP ngay trên trình duyệt.

Thả ảnh biểu tượng vào đâyPNG, JPG, WebP hoặc SVG · nên dùng ảnh từ 1024 × 1024 px trở lên · tối đa 50 MB
Chọn tệpXử lý trên thiết bị của bạn – không tải lên

Một ảnh thành 39 biểu tượng PNG cho iOS, Android và web, kèm Contents.json, XML biểu tượng thích ứng, favicon.ico và web manifest, tất cả được vẽ ngay trên trình duyệt.

Chạy ngay trên trình duyệt · không cần tải lênCách hoạt động

Cách sử dụng Trình tạo icon ứng dụng

  1. 1

    Thêm hình ảnh

    Thả ảnh PNG, JPG, WebP hoặc SVG vuông, tốt nhất từ 1024 × 1024 pixel trở lên; logo nền trong suốt cũng dùng tốt.

  2. 2

    Chọn nền tảng

    Giữ iOS, Android và Web & PWA, hoặc bỏ chọn nền tảng bạn không phát hành, rồi chọn bộ kích thước Xcode đầy đủ hoặc chỉ một biểu tượng 1024 px.

  3. 3

    Chỉnh giao diện

    Đặt khoảng đệm, màu nền và kích thước hình ảnh bên trong biểu tượng thích ứng và maskable, đồng thời kiểm tra đường vùng an toàn và các hình dạng launcher.

  4. 4

    Tải xuống ZIP

    Nhấn Tải xuống ZIP rồi chép từng thư mục vào dự án; tệp README bên trong cho biết mỗi tệp đặt ở đâu.

Giới hạn và Pro

Miễn phí, không có watermark: mỗi lần một ảnh nguồn tối đa 50 MB, tối đa 44 biểu tượng PNG mỗi ZIP (mặc định 39, thêm 5 khi bật lớp biểu tượng theo chủ đề), tải xuống không giới hạn.

Về Trình tạo icon ứng dụng

Trình tạo biểu tượng ứng dụng biến một bức ảnh thành bộ biểu tượng hoàn chỉnh mà ứng dụng di động hoặc ứng dụng web tiến bộ (PWA) cần, với tệp được đặt tên và chia thư mục đúng như Xcode, Android Studio và trình duyệt mong đợi. Khi chọn tất cả nền tảng, tệp ZIP chứa 39 tệp PNG: 15 tệp cho asset catalog của iPhone và iPad, gồm biểu tượng App Store 1024 px; 15 ảnh launcher Android từ mật độ mdpi đến xxxhdpi; biểu tượng Google Play 512 px; và 8 biểu tượng web gồm kích thước manifest 192 và 512 px, các bản maskable, apple-touch-icon 180 px cùng favicon 16, 32 và 48 px.

Cùng với ảnh là Contents.json cho AppIcon.appiconset, XML mipmap-anydpi-v26 cho biểu tượng thích ứng Android 8 kèm tài nguyên màu nền, favicon.ico chứa ba kích thước, khối icons của manifest.webmanifest và các thẻ link HTML. Tệp iOS được ghi không có kênh alpha vì Xcode từ chối biểu tượng App Store có kênh này, và mọi kích thước đều được thu nhỏ từ bản gốc 1024 px theo từng bước giảm một nửa để biểu tượng nhỏ vẫn sắc nét.

Công cụ không thiết kế biểu tượng hay xóa nền giúp bạn, và lớp nền thích ứng dùng một màu đặc chứ không phải ảnh thứ hai. Bản xem trước Squircle, Giọt nước và hình tròn mô phỏng các launcher phổ biến; mỗi hãng điện thoại có mặt nạ riêng, nên hãy kiểm tra kết quả trên thiết bị thật.

Quyền riêng tư

Ảnh của bạn được giải mã, đổi kích thước và đóng gói vào ZIP ngay trong tab trình duyệt này, bằng canvas và Web Worker cục bộ, nên ảnh không rời khỏi thiết bị, không được tải lên hay lưu trữ.

Tính năng

Asset catalog cho Xcode

AppIcon.appiconset kèm Contents.json, đủ kích thước iPhone và iPad, PNG không có alpha.

Biểu tượng Android thích ứng

Lớp trước, tài nguyên màu nền, biểu tượng tròn, lớp theo chủ đề và Play Store 512.

PWA và favicon

Biểu tượng manifest, bản maskable, apple-touch-icon, favicon.ico và thẻ HTML dựng sẵn.

Trình tạo icon ứng dụng: câu hỏi thường gặp

Ảnh nguồn nên có kích thước bao nhiêu?
Hãy dùng ảnh vuông từ 1024 × 1024 pixel trở lên, đây là kích thước biểu tượng App Store và cũng là tệp lớn nhất trong bộ. Ảnh nhỏ hơn vẫn dùng được nhưng các biểu tượng lớn bị phóng to nên hơi mờ, và công cụ sẽ cảnh báo bạn. Tệp SVG được vẽ ở độ phân giải đầy đủ, nên logo vector luôn sắc nét ở mọi kích thước.
Các tệp đặt ở đâu trong dự án Xcode?
Mở Assets.xcassets trong Xcode, xóa bộ AppIcon hiện có rồi kéo thư mục ios/AppIcon.appiconset từ ZIP vào, hoặc thay thư mục đó trong Finder. Contents.json ghép mỗi tệp PNG với vị trí iPhone, iPad hoặc App Store của nó. Nếu dự án dùng Xcode 14 trở lên, bạn có thể chọn Single 1024 để Xcode tự tạo các kích thước nhỏ hơn.
Biểu tượng thích ứng Android hoạt động thế nào?
Từ Android 8, biểu tượng launcher gồm hai lớp 108 dp: lớp nền, ở đây là màu bạn chọn, và lớp trước chứa hình ảnh của bạn. Launcher cắt phần giữa 72 dp rồi áp hình dạng riêng, như hình tròn hoặc squircle, nên nội dung nằm ngoài vòng tròn 66 dp ở giữa có thể bị mất. Đường vùng an toàn hiển thị hai ranh giới đó trên bản xem trước.
Biểu tượng maskable cho PWA là gì?
Biểu tượng maskable phủ nền kín toàn bộ hình vuông để Android cắt thành bất kỳ hình dạng nào mà không để viền trắng. Trình duyệt chỉ đảm bảo vòng tròn bao 80% ở giữa ảnh, nên hãy giữ logo trong vùng đó. ZIP có sẵn PNG maskable 192 và 512 px, và đoạn manifest đánh dấu chúng bằng purpose maskable bên cạnh các biểu tượng thường.
Vì sao biểu tượng iOS của tôi có màu nền?
Apple yêu cầu biểu tượng ứng dụng phải hoàn toàn không trong suốt: biểu tượng App Store có kênh alpha sẽ không qua kiểm tra, và vùng trong suốt sẽ hiện màu đen trên màn hình chính. Vì vậy công cụ tô màu nền của bạn cho biểu tượng iOS, apple-touch-icon, biểu tượng Play Store, biểu tượng thích ứng và maskable, kể cả khi bật biểu tượng web trong suốt.

Công cụ liên quan

Tất cả công cụ cho lập trình viên

Tạo favicon

Biểu tượng ICO, PNG và manifest từ ảnh, văn bản hoặc emoji

Chuyển đổi SVG ↔ PNG

Xuất SVG thành PNG sắc nét, hoặc vector hóa PNG sang SVG

Đổi kích thước ảnh

Đổi kích thước theo pixel, phần trăm hoặc mẫu có sẵn – hàng loạt

Bảng màu & kiểm tra độ tương phản

Bảng màu, sắc độ, tương phản WCAG và kiểm tra mù màu