Mobiele app-iconen ontwerpen: essentiële vectorworkflow

Je app-icoon is het hardst werkende asset in je hele product. Het verkoopt je app in een 60x60-punts thumbnail op een druk startscherm, overleeft brutale compressie in store-zoekresultaten, en heeft ongeveer 0,3 seconde om te communiceren wat je doet voordat een gebruiker verder scrollt. Het verkeerd doen kost downloads. Het goed doen begint met vectoren.

Waarom vectorbronbestanden ononderhandelbaar zijn

Als je nog steeds app-iconen ontwerpt in Photoshop op 512x512, bouw je op zand. Tussen iOS en Android heb je meer dan 20 afzonderlijke PNG-bestanden nodig uit één ontwerp. De kleinste is 16x16 (favicon), de grootste 1024x1024 (App Store) — een 64x grootteverschil.

Rasterafbeeldingen degraderen bij schaling. Vectorafbeeldingen niet. Een vectorbronbestand — SVG van VectoSolve of AI/EPS van Illustrator — geeft je:

• Oneindige schaalbaarheid zonder kwaliteitsverlies bij elke resolutie
• Eén-bewerking-verspreiding: verander een kleur eenmaal, herexporteer alles
• Wiskundige precisie: curves blijven vloeiend, hoeken blijven scherp
• Toekomstbestendigheid: wanneer platformen nieuwe vereiste maten toevoegen, ben je al gedekt

"

Je app-icoon is de eerste en meest frequente indruk die gebruikers van je product hebben. Het verdient een vectorbasis.

iOS vs Android icoonvereisten

De twee platformen hebben compleet verschillende icoonfilosofieën. Voor beide ontwerpen betekent beide systemen diepgaand begrijpen.

Ontwerpraster en sleutelvormen

Zowel Apple als Google publiceren icoonrasters. Dit zijn geen suggesties — ze zijn de reden waarom goed ontworpen iconen naast elkaar op het startscherm "juist" aanvoelen.

Apple's sleutelvormen (binnen 1024x1024): cirkel van 860px diameter, vierkant van 672px, verticale rechthoek 592x840, horizontale rechthoek 840x592. De hoofdvorm van je icoon moet op een van deze aansluiten.

Google's Material-raster (108x108 dp canvas, 72x72 dp actief gebied): cirkel van 52dp, vierkant van 44dp, verticale rechthoek 36x52dp, horizontale rechthoek 52x36dp.

Het adaptieve icoonsysteem (Android)

Android's adaptieve icoonsysteem verrast ontwerpers. In plaats van één platte afbeelding lever je twee afzonderlijke lagen:

Voorgrondlaag (108x108 dp): Bevat je logo of symbool. De veilige zone is slechts het centrum van 66x66 dp — alles erbuiten kan worden afgesneden afhankelijk van het apparaatmasker.

Achtergrondlaag (108x108 dp): Een effen kleur, verloop of patroon. Altijd volledig zichtbaar na maskering en moet ondoorzichtig zijn.

108x108 dp totaal canvas
┌──────────────────────┐
│   ┌──────────────┐   │
│   │ Veilige zone │   │
│   │   66x66 dp   │   │
│   └──────────────┘   │
└──────────────────────┘
       ↓ Masker toegepast
    ◯ of ▢ of ⬡ enz.

De launcher kiest de maskervorm. Je icoon moet er correct uitzien met elk masker — cirkel, afgerond vierkant, squircle of aangepaste OEM-vormen. Adaptieve iconen ondersteunen ook parallaxbeweging: de voorgrond verschuift ten opzichte van de achtergrond bij kantelen of lang indrukken, dus zorg voor genoeg afloop om gaten te voorkomen.

Exportworkflow: van vector naar alle maten

1. De mastervector ontwerpen

Maak je icoon op 1024x1024 in een vectoreditor. Gebruik schone, gesloten paden. Vermijd effecten die falen bij kleine maten (complexe verlopen, lijnen dunner dan 2px bij definitieve render).

2. Platformvarianten maken

• iOS: Enkele platte compositie, geen transparantie, sRGB
• Android: Splits in foreground.svg en background.svg
• Web/PWA: Kan transparantie nodig hebben voor favicon; overweeg een maskeerbare icoonvariant

3. Batchexport

# iOS sizes
for size in 40 58 60 76 80 87 120 152 167 180 1024; do
  rsvg-convert -w $size -h $size icon.svg > "ios/icon_${size}.png"
done

# Android density buckets
for pair in "mdpi:48" "hdpi:72" "xhdpi:96" "xxhdpi:144" "xxxhdpi:192"; do
  density="${pair%%:*}"; size="${pair##*:}"
  rsvg-convert -w $size -h $size icon.svg > "android/${density}/ic_launcher.png"
done

4. Elke export controleren

Controleer elk bestand op aliasing-artefacten bij curves, detailverlies bij kleine maten, kleurnauwkeurigheid en correcte afmetingen. Stores wijzen verkeerde maten zonder genade af.

Toegankelijkheidsoverwegingen

Icoontoegang wordt door de meeste ontwerpers over het hoofd gezien, maar treft miljoenen gebruikers.

Kleurzichtbeperking: ~8% van de mannen en 0,5% van de vrouwen zijn getroffen. Zorg voor minimaal 3:1 luminantiecontrast tussen voorgrond en achtergrond. Vertrouw niet op rood/groen-onderscheid. Test door je ontwerp te desatureren naar grijswaarden.

Cognitieve belasting bij kleine maten: Gebruik één duidelijk focuselement. Vermijd fijne details die ruis worden onder 48px. Maak je silhouet onderscheidend — gebruikers met slechtziendheid vertrouwen op vormherkenning.

Platformfuncties: De hoog-contrastmodus van iOS kan achtergrondtinten wijzigen. Android's hoog contrast kan contouren toepassen op adaptieve iconen — controleer of je icoon werkt met geforceerde contouren.

De complete workflow

1. Onderzoek: Maak screenshots van concurrenticonen in je categorie. Ontdek wat opvalt.
2. Schetsen: Teken 20+ ruwe concepten die metaforen, lettervormen, abstracte vormen verkennen.
3. Vectoriseren: Breng je beste schetsen naar een vectoreditor of gebruik VectoSolve om handgetekende schetsen om te zetten in schone SVG-paden.
4. Verfijnen op het raster: Lijn uit op Apple/Google-sleutelvormen. Vereenvoudig agressief.
5. Testen op elke maat: Bekijk op 16px, 48px, 60px, 120px, 512px en 1024px.
6. Exporteren: Batchexport alle vereiste maten vanuit de vectorbron.
7. Valideren: Test op echte apparaten, lichte en donkere modus, in store-zoekmockups.
8. Itereren: Wijzig de vectorbron en herexporteer. Bewerk nooit direct een rasterexport.

Je app-icoon concurreert met miljoenen andere om aandacht. Het verdient de precisie die alleen een vectorworkflow biedt. Begin met VectoSolve om je vectorbasis te leggen, verfijn in de SVG-editor en exporteer met vertrouwen wetend dat elke pixel op elke maat precies staat waar je hem hebt geplaatst.