Kích thước icon ứng dụng và kênh alpha: quy tắc hai store

Bạn có một logo và hai app store, nhưng file làm Apple hài lòng lại không phải file Google muốn. Chuyện lộ ra đúng lúc tệ nhất: bản build đã xong mà việc tải lên cứ hỏng vì một kênh alpha.

Apple muốn icon vuông 1024x1024 với nền đục hoàn toàn. Play muốn file PNG 32-bit 512x512 — về mặt kỹ thuật có hỗ trợ alpha, nhưng theo chính tài liệu thiết kế của Google thì bạn không nên dùng. Và không store nào muốn một file trông đã hoàn thiện — cả hai đều tự áp bo góc và hiệu ứng riêng sau khi bạn tải lên. Dưới đây là yêu cầu của từng bên, và cách lấy cả hai file ra từ một logo.

Apple: 1024 pixel, vuông, không có gì xuyên thấu

Human Interface Guidelines của Apple ghi kích thước bố cục icon ứng dụng cho iOS, iPadOS và macOS là 1024x1024 px, vuông, ở sRGB, Gray Gamma 2.2 hoặc Display P3. Hướng đi Apple khuyến khích bây giờ là Icon Composer — bạn nhập các lớp tiền cảnh rồi định nghĩa nền ngay trong công cụ — nhưng một ảnh đã ép phẳng vẫn được chấp nhận: các lớp cho bạn nhiều quyền kiểm soát hơn, chứ không bắt buộc.

Người nộp lần đầu thường vấp ở phần nền. Chỉ dẫn của Apple cho lớp nền được nhập vào rất thẳng thừng: hãy để nó phủ kín toàn khung và đục hoàn toàn. Một file PNG 1024px với nền trong suốt không phải là icon App Store hợp lệ — tải lên là App Store Connect trả về ITMS-90717: icon App Store không được trong suốt hay chứa kênh alpha. Biến thể giao diện tối là ngoại lệ duy nhất: Apple yêu cầu bạn nộp bản đó với nền trong suốt để nền do hệ thống cung cấp lộ ra phía sau. Còn ở mọi chỗ khác, hãy quyết định màu nào nằm sau logo và ép sẵn màu đó vào file.

Các nền tảng khác của Apple đổi kích thước bố cục: watchOS 1088x1088 và visionOS 1024x1024, cả hai đều bị cắt tròn, còn tvOS là khổ ngang 800x480. Chúng cũng đổi luôn cách làm: icon tvOS và visionOS được dựng thành chồng lớp ảnh (layered image stack) trong Xcode chứ không phải trong Icon Composer.

Google Play: 512 pixel, cho phép alpha, trong suốt vẫn là sai lầm

Icon trong tin đăng trên Play là file PNG 32-bit có alpha, 512x512 px, sRGB, tối đa 1024KB. Chỉ đọc mỗi dòng đó thì ảnh tách nền trong suốt bạn đang có trông rất ổn.

Tài liệu thiết kế icon của Google đóng sập cánh cửa đó: tài nguyên trong suốt sẽ hiển thị màu nền của giao diện Google Play. Logo của bạn khi ấy trôi nổi trên bất kỳ bề mặt nào Play dựng ra, và một logo tối màu sẽ biến mất trong chế độ tối. Lời khuyên của Google: hãy chọn một màu nền phù hợp với thương hiệu.

Thêm hai quy tắc của Play: không huy hiệu hay chữ ám chỉ thứ hạng, giá hay danh mục của Play, và icon trong tin đăng tách biệt với icon khởi chạy trên máy. Adaptive icon đó dùng các lớp 108x108 dp, trong đó chỉ phần lõi 66x66 dp mới được đảm bảo không bao giờ bị mặt nạ bo cắt của hãng máy cắt mất.

Lấy cả hai file ra từ một logo

Cả hai file đều bắt đầu từ cùng một thứ: logo của bạn, được tách sạch khỏi bất cứ thứ gì nó đang nằm trên. Nếu logo chỉ tồn tại dưới dạng file JPEG do nhà cung cấp gửi hoặc một tấm ảnh chụp ấn phẩm in, hãy tách nền trước để hình dạng được cô lập bằng kênh alpha thật. remover.bg nhấc logo ra khỏi phông nền và cho bạn thả nó lên nền màu trơn hay màu thương hiệu tùy chỉnh ngay trong trình chỉnh sửa — đúng bước ép phẳng mà Apple yêu cầu.

Trình tự làm việc đúng:

1. Xóa phông nền để logo đứng một mình. Kiểm tra đường viền trên nền màu tối chứ đừng trên nền trắng — nét mảnh và chân chữ serif giấu khuyết điểm rất giỏi khi xem trên nền trắng.
2. Đặt nền thành màu thương hiệu và xuất ra PNG. Giữ lại cả bản trong suốt, để dùng cho bộ tư liệu báo chí và favicon.
3. Trong công cụ thiết kế của bạn, đặt file PNG đó lên khung vuông rồi xuất ở 1024x1024 cho Apple và 512x512 cho Play. Việc chỉnh kích thước thuộc về chỗ đó, không phải công cụ xóa phông nền.

Với logo scan hoặc chụp lại, bài cách xóa phông nền của logo đi qua các trường hợp khó, còn hướng dẫn tạo PNG trong suốt giải thích vì sao bản gốc đó đáng giữ.

Hãy để các store tự vẽ bo góc và bóng đổ

Play nói rất rõ về chuyện này: chính họ bo góc ở bán kính bằng 30% kích thước icon, tự thêm bóng đổ sau khi bạn tải lên, và yêu cầu bạn bỏ cả hai. Apple thì bo cắt hình vuông của bạn thành hình chữ nhật bo góc của hệ thống rồi áp các hiệu ứng ánh sáng, khúc xạ và trong mờ của riêng mình, kèm cảnh báo rằng lớp đã bo cắt sẵn sẽ làm hỏng các hiệu ứng đó và khiến đường viền trông răng cưa.

Vậy nên: không bo góc sẵn, không bóng đổ, không vát cạnh, không hiệu ứng phát sáng. Sự tiết chế đó chỉ đúng với icon — còn trên một ảnh sản phẩm, bóng tiếp xúc chân thực mới là thứ khiến món đồ không trông như bị dán vào.

Vì cả hai store đều bo cắt, hãy giữ phần quan trọng của logo ở chính giữa. Apple hướng dẫn đặt nội dung chính vào giữa để mặt nạ không thể cắt cụt nó. Lưới keyline của Play thì hoạt động khác với những gì nhiều người tưởng: nó là công cụ định vị, không phải ranh giới. Chỉ dẫn của Google là hãy phủ kín toàn bộ tài nguyên bằng phần đồ họa khi có thể, và chỉ lùi về dùng keyline khi hình dạng bao quanh logo là yếu tố cốt lõi của thương hiệu. Chừa lề cho chắc ăn thì icon của bạn sẽ hiển thị nhỏ hơn thấy rõ so với mọi tin đăng bên cạnh.

Thứ mà bán kính 30% thực sự ăn mất là bốn góc, nên logo dạng chữ (wordmark) bị đẩy sát vào đó sẽ mất phần đuôi. Trên mặt nạ tròn của watchOS và visionOS, một logo dạng chữ kéo sát mép còn mất trắng cả chữ đầu lẫn chữ cuối.

Trước khi tải lên

• Apple: PNG 1024x1024, vuông, đục hoàn toàn, để nguyên góc nhọn.
• Play: PNG 32-bit 512x512, tối đa 1024KB, nền màu thương hiệu thay vì trong suốt, để nguyên góc nhọn.
• Cùng một phần đồ họa và bảng màu ở cả hai store: người dùng phải nhận ra một ứng dụng, chứ không phải hai.
• Xem thử cả hai ở cỡ thumbnail. Chi tiết đọc rõ ở 1024 sẽ biến mất ở 40 pixel.

Sửa icon một lần và nó sẽ yên vị cho mọi bản phát hành sau này.