Panuntunan sa App Icon: Alpha Channel at Sukat Kada Store

May iisa kang logo pero dalawang app store, at ang file na katanggap-tanggap para sa Apple ay hindi ang file na gusto ng Google. Lumalabas ito sa pinaka-hindi magandang oras: tapos na ang build pero paulit-ulit na nabibigo ang upload dahil sa alpha channel.

Gusto ng Apple ng parisukat na 1024x1024 icon na may opaque na background. Gusto naman ng Play ng 512x512 32-bit PNG na technically sumusuporta sa alpha pero, base mismo sa design spec ng Google, hindi dapat gamitin ito. At wala sa dalawang store ang gusto ng file na parang tapos na ang itsura — pareho silang naglalagay ng sariling corners at effects pagkatapos ma-upload. Narito ang hinihingi ng bawat isa, at kung paano makukuha ang dalawang file mula sa iisang logo.

Apple: 1024 pixels, parisukat, walang transparent

Ayon sa Human Interface Guidelines ng Apple, ang layout size ng app icon para sa iOS, iPadOS, at macOS ay 1024x1024 px, parisukat, sa sRGB, Gray Gamma 2.2 o Display P3. Ang mas preferred na paraan ngayon ng Apple ay ang Icon Composer, kung saan ini-import mo ang foreground layers at itinatakda ang background sa loob mismo ng tool, pero pinapayagan pa rin ang flattened na imahe: nagbibigay lang ng mas maraming control ang layers, hindi ito obligado.

Ang background ang kadalasang dahilan kung bakit natitigil ang mga unang beses na nagsu-submit. Diretso ang tagubilin ng Apple para sa imported background layer: gawin itong full-bleed at opaque. Hindi valid na App Store icon ang 1024px na PNG na may transparent na background — mag-upload ka ng ganito at ibabalik ng App Store Connect ang ITMS-90717: hindi maaaring transparent o magkaroon ng alpha channel ang App Store icon. Ang dark appearance variant lang ang eksepsiyon: hihilingin sa iyo ng Apple na ibigay ito na may transparent na background para makasilip ang background na ibinibigay ng system. Sa lahat ng iba pang pagkakataon, ikaw ang magpapasya kung anong kulay ang nasa likod ng iyong mark at i-bake ito sa file.

Iba ang layout size sa ibang Apple platform: 1088x1088 ang watchOS at 1024x1024 ang visionOS, pareho silang naka-mask na circular, habang landscape 800x480 naman ang tvOS. Iba rin ang paraan: ang tvOS at visionOS icons ay itinitipon bilang layered image stacks sa Xcode sa halip na sa Icon Composer.

Google Play: 512 pixels, pinapayagan ang alpha, mali pa rin ang transparency

Ang store listing icon ng Play ay 32-bit PNG na may alpha, 512x512 px, sRGB, hanggang 1024KB lang. Kung iyan lang ang babasahin mo, mukhang okay na ang transparent cutout na mayroon ka na.

Sinasarhan ito ng icon design spec ng Google: ang mga transparent na asset ay magpapakita na lang ng background color ng Google Play UI. Lulutang na lang ang iyong mark sa kahit anong surface na i-render ng Play, at mawawala ang dark logo kapag dark mode. Payo ng Google: pumili ng background color na angkop sa iyong brand.

Dalawa pang panuntunan ng Play: walang badge o text na nagpapahiwatig ng ranking, presyo, o Play categories, at hiwalay ang store listing icon sa device launcher icon. Gumagamit ang adaptive icon na iyon ng 108x108 dp layers, kung saan ang panloob na 66x66 dp lang ang garantisadong hindi kailanman ma-clip ng OEM mask.

Kung Paano Makukuha ang Dalawang File Mula sa Iisang Logo

Nagsisimula ang dalawang file sa parehong bagay: ang iyong mark, malinis na hiwalay mula sa kahit anong kinalalagyan nito dati. Kung ang logo mo ay JPEG lang mula sa supplier o litrato ng naka-print na stationery, i-cutout muna ito para maihiwalay ang hugis na may tunay na alpha channel. Aalisin ng remover.bg ang mark mula sa background nito at hahayaan kang ilagay ito sa solid o custom na brand color sa loob ng editor — ang flatten step na kailangan ng Apple.

Ang pagkakasunod-sunod na gumagana:

1. Alisin ang background para nakatayo mag-isa ang logo. I-check ang mga edge laban sa dark na kulay, hindi puti — nagtatago ang mga sira sa manipis na stroke at serif kapag preview sa puti.
2. Itakda ang background sa kulay ng iyong brand at mag-export ng PNG. Panatilihin din ang transparent na bersyon, para sa press kits at favicons.
3. Sa sarili mong design tool, ilagay ang PNG na iyon sa isang parisukat na canvas at i-export sa 1024x1024 para sa Apple at 512x512 para sa Play. Doon dapat ginagawa ang sizing, hindi sa background remover.

Para sa naka-scan o na-litrato na logo, tinatalakay ng pag-alis ng background mula sa isang logo ang mga edge case, at ipinapaliwanag naman ng gabay sa transparent PNG kung bakit sulit panatilihin ang master file na iyon.

Hayaan ang mga Store na Gumuhit ng Corners at Shadow

Specific ang Play sa bagay na ito: nire-round nito mismo ang corners sa radius na 30% ng icon size, nagdaragdag ng sarili nitong drop shadow pagkatapos ng upload, at hinihiling na huwag mo nang gawin ang pareho. Ini-mask naman ng Apple ang iyong square papunta sa rounded rectangle ng system at inilalapat ang sarili nitong highlights, refraction, at translucency, na may babala na nakakasira ang pre-masked layers sa mga effect na iyon at nagpapamukhang jagged ang mga edge.

Kaya: walang pre-rounded corners, walang drop shadow, walang bevel, walang glow. Specific ito sa icons — sa product photo naman, ang makatotohanang contact shadow ang pumipigil sa item na magmukhang pinaste lang.

Dahil parehong nag-ma-mask ang dalawang store, panatilihing nasa gitna ang mahalagang bahagi ng iyong mark. Payo ng Apple na i-center ang primary content para hindi ito ma-truncate ng masking. Iba ang gawi ng keyline grid ng Play kumpara sa akala ng karamihan: positioning guide ito, hindi boundary. Tagubilin ng Google na punuin ng artwork ang buong asset kung kaya mo, at bumalik lang sa keylines kung mahalaga sa brand ang hugis sa paligid ng logo. Kung magpa-pad ka ng square dahil lang sa pag-iingat, mas maliit na kitang-kita ang icon mo kumpara sa bawat listing sa tabi nito.

Ang talagang kinakain ng 30% radius ay ang mga corner, kaya nawawalan ng dulo ang wordmark na itinutulak papunta roon. Sa circular na mask ng watchOS at visionOS, tuluyang nawawala ang unang at huling letra ng edge-to-edge na wordmark.

Bago Mag-upload

• Apple: 1024x1024 PNG, parisukat, ganap na opaque, matalim pa rin ang corners.
• Play: 512x512 32-bit PNG, 1024KB pinakamataas, background na kulay ng brand sa halip na transparency, matalim pa rin ang corners.
• Parehong artwork at kulay sa dalawang store: dapat makilala ng users na iisang app ito, hindi dalawa.
• I-preview ang pareho sa thumbnail size. Nawawala sa 40 pixels ang detalyeng malinaw sa 1024.

Ayusin ang icon nang minsan at mananatili itong ayos sa bawat release simula ngayon.