jquery.app
Nederlands
EnglishDeutschFrancaisEspanol日本語Nederlands

Afbeelding- en assettools

Gratis PWA Maskable Icon Safe Zone Generator

Upload een app-icoon en bekijk de PWA-maskable-safe-zone met overlay-preview.

Tool laden...

Wat is PWA Maskable Icon Safe Zone Generator?

Een maskable pictogram is een PWA-pictogram dat zich kan aanpassen aan verschillende platformvormen. Android kan het weergeven als een cirkel, squircle of afgerond vierkant, afhankelijk van het apparaat. De veilige zone is het binnenste gedeelte van het pictogram dat gegarandeerd zichtbaar is ongeacht de vorm. PWA-richtlijnen raden aan dat belangrijke pictograminhoud ten minste 80% van het canvas vult, met padding zodat inhoud binnen de veilige zone blijft.

Snel antwoord

Upload uw vierkante PWA-pictogram om de maskable veilige zone-overlay te bekijken. Houd belangrijke inhoud binnen de veilige zone (de binnenste 80% van het pictogram). Exporteer manifest-pictogramitems met zowel any- als maskable-doeleinden op 192x192 en 512x512 formaten.

Last updated: 2026-05-28

Beperkingen

  • De preview toont een cirkelvormige veilige zone, maar werkelijke platformvormen variëren (squircles, afgeronde vierkanten, cirkels). De cirkelvormige zone is een redelijke worst-case benadering voor alle vormen.
  • Deze tool biedt alleen een visuele preview. Het exporteert geen daadwerkelijke PNG-bestanden - gebruik een afbeeldingseditor of pictogramgeneratietool om de uiteindelijke pictogrambestanden op de vereiste formaten te maken.
  • Sommige platforms passen extra transformaties toe naast maskable bijsnijden, zoals slagschaduwen of platformspecifieke pictogrambehandelingen die hier niet kunnen worden voorbeeld.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Zo gebruik je deze tool

  1. Upload een vierkant PNG-pictogram (512x512 of groter aanbevolen) voor uw PWA.
  2. Pas het veilige zone paddingpercentage aan - 15% (PWA-standaard) betekent een 85% zichtbare veilige zone.
  3. Bekijk de overlay op het pictogram om te bevestigen dat belangrijke inhoud binnen de gestreepte veilige zone-cirkel valt.
  4. Kopieer de manifest-pictogramitems met purpose: maskable en exporteer uw pictogrammen op 192x192 en 512x512.

Waarvoor je het kunt gebruiken

  • Verifieer dat de belangrijkste visuele elementen van uw app-pictogram binnen de maskable veilige zone blijven voordat u naar productie implementeert.
  • Genereer correct geconfigureerde manifest-pictogramitems met de juiste formaten, doeleinden en typevelden.
  • Bekijk hoe verschillende paddingwaarden het zichtbare gedeelte van uw pictogram op Android en Chrome OS beïnvloeden.

Gebruik

Praktische voorbeelden

Voorbeeld

Voorbereiden van een logopictogram voor PWA

Een merk heeft een cirkelvormig logo. Upload de 1024x1024 PNG, stel padding in op 15% en controleer of de logoranden niet worden afgekapt. De tool bevestigt dat het logo binnen de veilige zone blijft met een gestreepte overlay.

Voorbeeld

Pictogram veilige zone controle vóór winkelinzending

Controleer vóór het publiceren van een PWA naar de Google Play Store de veilige zone van het pictogram. Upload het pictogram, bevestig dat de belangrijkste inhoud gecentreerd is en binnen de veilige grens valt, en exporteer de manifestitems met zowel any- als maskable-doeleinden.

Veelgemaakte fouten

  • purpose: maskable gebruiken op een pictogram dat geen veilige zone padding heeft - het pictogram kan worden bijgesneden tot een onherkenbare vorm op Android.
  • Slechts één pictogramformaat opgeven - PWA vereist minimaal 192x192 en 512x512 voor installeerbaarheid op alle platforms.
  • Een niet-vierkant pictogram uploaden - maskable pictogrammen moeten vierkant zijn voor consistente weergave op alle platformvormen.

Verificatie

  1. Gebruik Lighthouse PWA-audit om uw manifest, pictogrammen en maskable pictogramconfiguratie te verifiëren.
  2. Test op een fysiek Android-apparaat door de PWA te installeren en het beginscherm-pictogramuiterlijk te controleren met verschillende apparaatthema's.

FAQ

Vragen over PWA Maskable Icon Safe Zone Generator

Welk percentage van het pictogram moet binnen de veilige zone zijn?

De PWA veilige zone standaard beveelt aan dat de veilige zone 80% van het pictogramoppervlak beslaat, wat betekent 10% padding aan elke kant. Veel ontwerpers gebruiken echter 15% padding (70% veilige zone) voor extra veiligheidsmarge. De tool standaardiseert op 15% padding. Belangrijke inhoud zoals logo's en tekst moet binnen de veilige zone blijven.

Wat is het verschil tussen any- en maskable-pictogramdoel?

purpose: any betekent dat het pictogram zoals het is kan worden gebruikt zonder aanpassing. purpose: maskable betekent dat het pictogram is ontworpen met een veilige zone en kan worden bijgesneden of gemaskeerd door het platform. Neem altijd ten minste één pictogram op met beide doeleinden (any maskable) om brede compatibiliteit te garanderen.

Welke achtergrondkleur moet ik gebruiken voor maskable pictogrammen?

Stel de achtergrondkleur in op de kleur van uw pictogramcanvas. Als uw pictogram een transparante achtergrond heeft, kies dan een effen achtergrondkleur die het pictogram aanvult, omdat platforms transparante gebieden zullen vullen. De background_color in uw manifest moet overeenkomen met deze kleur voor een consistente splash screen-ervaring.

Gerelateerde tools

Meer afbeelding- en assettools

Probeer ook

Probeer ook

Css

CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Open tool