ImageConver · Day 18 · Browser icon tool
Maskable Icon Generator
Preview square, circle, rounded-square, and squircle masks while keeping essential artwork inside the standardized 40% radius safe zone. Export 192×192 and 512×512 maskable PNG files with a manifest icon list.
Lokale verwerking. De bronafbeelding blijft op dit browsertabblad staan. Bewaar de bewerkbare master en valideer de gegenereerde assets in de officiële tools van het platform.
Kies een afbeelding om te beginnen.
Direct antwoord
Wat deze pagina oplevert en waar het past
Preview square, circle, rounded-square, and squircle masks while keeping essential artwork inside the standardized 40% radius safe zone. Export 192×192 and 512×512 maskable PNG files with a manifest icon list. The preview helps evaluate geometric cropping but cannot reproduce every launcher, operating-system effect, or installation surface. Maskable artwork should use a full-bleed opaque background and needs separate testing from a normal purpose-any icon.
Pictogramwerk is een bezorgsysteem, geen enkele wijziging van het formaat. Een platform kan dezelfde identiteit gebruiken in een winkel, opstartprogramma, melding, instellingenscherm, browsertabblad, geïnstalleerde webapp, snelkoppeling of zoekresultaat op besturingssysteem. Elke context kan een ander masker, dichtheid, cache, compositieregel of validatiestap toepassen. Het gegenereerde pakket moet daarom worden behandeld als een geteste afgeleide van een bewerkbare merkmaster.
Begin met schone bronillustraties. Houd het primaire onderwerp gecentreerd, verwijder onnodige tekst, vermijd haarlijndetails en beoordeel het ontwerp op de kleinste werkelijke weergavegrootte. Voeg het buitenste ronde masker of de systeemschaduw van een platform niet toe aan de bron, tenzij de huidige officiële richtlijnen deze behandeling expliciet vereisen. Een groot voorbeeld kan problemen verbergen die duidelijk worden bij 16, 32 of 48 pixels.
Bestandsafmetingen alleen bewijzen de juistheid niet. Bevestig kleurruimte, alfagedrag, bestandspaden, MIME-typen, metagegevens van manifesten of activacatalogi, doeldeclaraties, naamgeving, cachegedrag en daadwerkelijke apparaatpresentatie. Bewaar het bronbestand en documenteer welke generatorinstellingen de beoordeelde release-items hebben opgeleverd.
Werkstroom
Een gecontroleerd pictogramproces in vier stappen
- 1
Inspecteer de bron
Upload a high-resolution source and choose an opaque background.
- 2
Kies instellingen
Adjust artwork scale while keeping the identifying subject inside the safe-zone overlay.
- 3
Genereer activa
Switch preview masks and inspect edge content at both target sizes.
- 4
Valideer de levering
Generate the package, merge its manifest entries, and test installed results on real devices.
Visuele kwaliteit
Pasvorm, detail, transparantie en herkenning
Inlijsten en opvullen
Fit-modus verandert de betekenis. Contain behoudt de volledige broncode en kan er achtergrond omheen toevoegen; dekking vult het vierkant en kan randen bijsnijden. Opvulling is handig voor gecentreerde markeringen, maar te veel zorgt voor een klein uitziend pictogram. Vergelijk maskers en kleine voorbeelden voordat u een waarde accepteert.
Klein detail
Door rasterverkleining worden details verwijderd. Dunne lijnen, kleine tellers, fotografische texturen en letters kunnen vervagen of verdwijnen. Het beste kleine pictogram is vaak een vereenvoudigde tekening in plaats van een mechanisch verkleinde versie van marketingkunstwerk. Bekijk de werkelijke pixeluitvoer op een schaal van 100%.
Achtergrond gedrag
Transparantie is niet neutraal. Een browser, opstartprogramma, winkel of besturingssysteem kan transparante pixels samenstellen tegen een kleur die u niet hebt gekozen. Full-bleed platformillustraties moeten een bewuste achtergrond gebruiken waar de begeleiding dit verwacht, terwijl formaten zoals ICO opzettelijk alpha kunnen behouden.
Kleurcontrast en -herkenning zijn van belang in lichte, donkere, getinte en thematische omgevingen. Test het pictogram in de buurt van concurrerende pictogrammen en tegen meerdere achtergronden. Geautomatiseerde generatie kan niet bepalen of een merk onderscheidend, toegankelijk, juridisch goedgekeurd of consistent is met de huidige merkregels.
Belangrijke grenzen
Welke geautomatiseerde pictogramgeneratie kan niet worden gegarandeerd
- The preview shapes are representative and not an exhaustive device catalog.
- Artwork outside the safe zone can be removed by a user-agent mask.
- Transparent pixels may be composited onto an unexpected platform-selected color.
- Maskable icons do not replace general-purpose icons in every browser context.
Gebruiksgevallen
Waar deze pagina past in de productie
Levering van producten
Create adaptive PWA Home Screen artwork.
Compatibiliteit werk
Repair excessive letterboxing around a standard icon.
Kwaliteitsbeoordeling
Check logo safety under several common masks.
Overdracht van ontwikkelaar
Package maskable entries separately from ordinary manifest icons.
Uitvoering
Configuratie-, caching- en releasecontroles
Bewaar gegenereerde bestanden op stabiele, cachebewuste URL's. Een manifest of HTML-declaratie die naar een ontbrekend bestand verwijst, wordt niet gered door de juiste PNG op de computer van een ontwikkelaar te hebben. Controleer de HTTP-status, het inhoudstype, de afmetingen, bestandsbytes en het gedrag van dezelfde oorsprong of cross-origin, waar relevant.
Behandel configuratiebestanden als reviewbare code. Inspecteer elk manifestitem, itemcatalogusrecord, mapnaam, schaalfactor, doeltoken en bestandsnaam voordat u samenvoegt. Een gegenereerd fragment vermijdt opzettelijk het raden van applicatienamen, start-URL's, bundel-ID's, themakleuren of projectinstellingen die bij de echte applicatie horen.
Cache-invalidatie verdient een releasecontrole. Geïnstalleerde web-apps, browsers, draagraketten, bouwsystemen en winkels kunnen oude pictogrambronnen behouden. Gebruik doelbewuste versiepaden of cachebeleid, bouw de applicatie opnieuw op, installeer deze indien nodig opnieuw en onderscheid een verouderde bron van een onjuist gegenereerde bron.
Valideer zowel de geometrie als de workflow. Geometrie omvat bijsnijden, veilige zones, centreren, randbehandeling en helderheid op klein formaat. De workflow omvat correct bronbeheer, herhaalbare instellingen, platformconfiguratie, build-uitvoer, implementatie en terugdraaien. Een visueel aantrekkelijk bestand kan nog steeds mislukken omdat het project naar een andere bestandsnaam verwijst.
Privacy
Lokale verwerking en activabehandeling
De browser leest de geselecteerde bron met lokale bestands-API's, tekent afgeleiden naar canvas, codeert PNG-gegevens en verzamelt de gevraagde ZIP of ICO in het geheugen. ImageConver verzendt in deze workflow geen bronpixels naar een pictogramconversie-eindpunt.
Lokale verwerking vermindert de blootstelling aan overdrachten, maar maakt een gedeeld apparaat niet privé. Browserdownloads, lijsten met recente bestanden, gesynchroniseerde mappen, back-ups, extensies en voorbeelden van besturingssystemen kunnen kopieën bevatten. Gebruik een goedgekeurd werkstation voor niet-uitgebrachte merken of vertrouwelijke productillustraties.
Gegenereerde object-URL's zijn tijdelijk en worden ingetrokken wanneer ze worden vervangen of opnieuw worden ingesteld. Verplaats beoordeelde assets naar gecontroleerde projectopslag, bewaar de bewerkbare master en sluit het tabblad nadat u gevoelige materialen heeft verwerkt.
Veelgestelde vragen
Maskable Icon Generator FAQ
What is the maskable safe zone?
The guaranteed safe zone is a centered circle with radius equal to 40% of the icon size. Important content should remain inside it.
Why is the outer edge still useful?
It supplies full-bleed background and nonessential visual material that can fill different platform masks.
Which sizes are exported?
The package includes 192×192 and 512×512 PNG files, with manifest entries marked purpose maskable.
Should maskable icons be transparent?
A solid opaque background is safer because user agents may composite transparency onto a color you did not choose.
Can one icon use purpose any maskable?
The manifest permits multiple purpose tokens, but separate normal and maskable artwork is often easier to reason about and test.
Are source files uploaded?
No. Previewing, resizing, PNG encoding, manifest creation, and ZIP packaging remain local.
How do I validate the output?
Use browser developer tools, inspect the minimum safe area, install the PWA, and review several actual devices and launchers.
Primaire referenties
Actuele platformdocumentatie
- W3C Web Application Manifest specification
- web.dev: Adaptive icon support with maskable icons
- web.dev: Add a web app manifest
Laatst beoordeeld: 20 oktober 2026. Platformvereisten en toolwijziging; verifieer release-kritieke assets aan de hand van de huidige primaire documentatie.