App-icoonregels: alfakanaal en formaten voor beide stores

Je hebt één logo en twee app stores, en het bestand dat Apple tevredenstelt is niet het bestand dat Google wil. Het komt op het slechtst denkbare moment boven water: de build is klaar en de upload blijft stuklopen op een alfakanaal.

Apple wil een vierkant icoon van 1024x1024 met een dekkende achtergrond. Play wil een 512x512 32-bits PNG die technisch gezien alfa ondersteunt, maar die volgens Googles eigen designspec juist geen alfa zou moeten gebruiken. En geen van beide stores wil een afgewerkt ogend bestand — ze leggen na de upload allebei hun eigen hoeken en effecten eroverheen. Dit is wat elke store vraagt, en hoe je beide bestanden uit één logo haalt.

Apple: 1024 pixels, vierkant, nergens doorzichtig

Apples Human Interface Guidelines geven de layoutmaat van het app-icoon voor iOS, iPadOS en macOS als 1024x1024 px, vierkant, in sRGB, Gray Gamma 2.2 of Display P3. Apples voorkeursroute is inmiddels Icon Composer, waar je voorgrondlagen importeert en de achtergrond in de tool zelf bepaalt, maar een platgeslagen afbeelding mag nog altijd: lagen geven je meer controle, verplicht zijn ze niet.

Wie voor het eerst indient, struikelt over die achtergrond. Apples instructie voor een geïmporteerde achtergrondlaag is kort: maak hem beeldvullend en dekkend. Een PNG van 1024px met een transparante achtergrond is geen geldig App Store-icoon — upload je er toch een, dan komt App Store Connect terug met ITMS-90717: het App Store-icoon mag niet transparant zijn en geen alfakanaal bevatten. De donkere variant is de enige uitzondering: die vraagt Apple juist mét transparante achtergrond aan te leveren, zodat de achtergrond van het systeem erdoorheen komt. Overal elders beslis jij welke kleur achter je beeldmerk zit, en bak je die erin.

Andere Apple-platforms hanteren een andere layoutmaat: watchOS 1088x1088 en visionOS 1024x1024, allebei rond gemaskeerd, en tvOS een liggende 800x480. En een andere methode: iconen voor tvOS en visionOS bouw je als gelaagde image stacks in Xcode in plaats van in Icon Composer.

Google Play: 512 pixels, alfa toegestaan, transparantie toch een misser

Het store listing-icoon van Play is een 32-bits PNG met alfa, 512x512 px, sRGB, maximaal 1024KB. Lees je alleen dat, dan lijkt de transparante uitsnede die je al hebt prima in orde.

Googles designspec voor iconen gooit die deur dicht: transparante assets tonen de achtergrondkleur van de Google Play-interface. Je beeldmerk zweeft dan op het oppervlak dat Play toevallig rendert, en een donker logo verdwijnt in donkere modus. Googles advies: kies een achtergrondkleur die bij je merk past.

Nog twee Play-regels: geen badges of tekst die een ranking, prijs of Play-categorie suggereren, en het store listing-icoon staat los van het launcher-icoon op het toestel. Dat adaptieve icoon werkt met lagen van 108x108 dp, waarvan alleen de binnenste 66x66 dp gegarandeerd nooit door een OEM-masker wordt weggeknipt.

Beide bestanden uit één logo halen

Allebei de bestanden beginnen bij hetzelfde: je beeldmerk, netjes losgemaakt van waar het op stond. Bestaat je logo alleen als JPEG van een leverancier of als foto van gedrukt briefpapier, snijd het dan eerst vrij, zodat de vorm geïsoleerd staat met een echt alfakanaal. remover.bg tilt het beeldmerk van zijn achtergrond en laat je het in de remover.bg-editor op een effen kleur of een eigen merkkleur zetten — precies de platslaan-stap die Apple eist.

De volgorde die werkt:

1. Verwijder de achtergrond zodat het logo alleen staat. Controleer de randen tegen een donkere kleur, niet tegen wit — dunne lijnen en schreven verbergen hun gebreken op een witte preview.
2. Zet de achtergrond op je merkkleur en exporteer een PNG. Bewaar ook de transparante versie, voor perskits en favicons.
3. Plaats die PNG in je eigen designtool op een vierkant canvas en exporteer op 1024x1024 voor Apple en 512x512 voor Play. Schalen hoort daar thuis, niet in de remover.bg-editor.

Voor een gescand of gefotografeerd logo behandelt zo verwijder je de achtergrond van een logo de randgevallen, en de gids over transparante PNG's legt uit waarom dat masterbestand het bewaren waard is.

Laat de stores de hoeken en de schaduw tekenen

Play is daar expliciet over: de store rondt de hoeken zelf af met een radius van 30% van de icoongrootte, zet er na de upload zijn eigen slagschaduw onder en vraagt je om allebei weg te laten. Apple maskeert jouw vierkant tot de afgeronde rechthoek van het systeem en legt daar zijn eigen highlights, refractie en doorschijnendheid overheen, met de waarschuwing dat voorgemaskeerde lagen die effecten schaden en randen gekarteld laten ogen.

Dus: geen vooraf afgeronde hoeken, geen slagschaduw, geen bevel, geen gloed. Die terughoudendheid geldt specifiek voor iconen — bij een productfoto is juist een realistische contactschaduw wat voorkomt dat het item erop geplakt lijkt.

Omdat beide stores maskeren, houd je het belangrijke deel van het beeldmerk gecentreerd. Apples richtlijn is om de primaire inhoud te centreren, zodat het masker er niets van kan afsnijden. Het keyline-raster van Play werkt anders dan mensen aannemen: het is een positioneringshulp, geen grens. Googles instructie is om het hele bestand met beeld te vullen waar dat kan, en pas op de keylines terug te vallen als de vorm rond een logo essentieel is voor het merk. Laat je uit voorzichtigheid marge rondom staan, dan rendert je icoon zichtbaar kleiner dan elke listing ernaast.

Wat die 30%-radius werkelijk opeet, zijn de hoeken, dus een woordmerk dat tot in die hoeken is geduwd, verliest zijn uiteinden. Op de ronde maskers van watchOS en visionOS raakt een woordmerk van rand tot rand zijn eerste en laatste letter regelrecht kwijt.

Voordat je uploadt

• Apple: 1024x1024 PNG, vierkant, volledig dekkend, hoeken scherp gelaten.
• Play: 512x512 32-bits PNG, maximaal 1024KB, een achtergrond in je merkkleur in plaats van transparantie, hoeken scherp gelaten.
• Hetzelfde beeld en dezelfde kleuren in beide stores: gebruikers moeten één app herkennen, geen twee.
• Bekijk ze allebei op thumbnailformaat. Detail dat op 1024 leesbaar is, verdwijnt op 40 pixels.

Los het icoon één keer goed op en het is geregeld, voor elke release na deze.