ImageConver · Day 17 · Browser icon tool
PWA Icon Generator
Generate standard 192×192 and 512×512 PWA icon PNG files and a ready-to-review web app manifest icon list. Choose fit, padding, and background, then download a local ZIP for integration and installation testing.
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
Generate standard 192×192 and 512×512 PWA icon PNG files and a ready-to-review web app manifest icon list. Choose fit, padding, and background, then download a local ZIP for integration and installation testing. The package supplies general-purpose raster icons and manifest JSON. It does not create a full manifest, service worker, installability audit, maskable-specific artwork, monochrome icons, screenshots, shortcuts, or platform store assets.
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 square source and choose a full-bleed background.
- 2
Kies instellingen
Set fit and padding while checking the 192-pixel and 512-pixel previews.
- 3
Genereer activa
Generate icons and the manifest icon list in one ZIP.
- 4
Valideer de levering
Integrate with the full manifest, serve over HTTPS, and test installation on target browsers.
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
- Icons alone do not make a web application installable.
- General-purpose icons can appear letterboxed when a platform expects maskable artwork.
- Browser and operating-system installation behavior varies.
- The generated manifest fragment must be merged with a valid full manifest and correct deployment paths.
Gebruiksgevallen
Waar deze pagina past in de productie
Levering van producten
Add baseline install icons to a new progressive web app.
Compatibiliteit werk
Replace low-resolution manifest artwork.
Kwaliteitsbeoordeling
Generate consistent 192px and 512px PNG assets.
Overdracht van ontwikkelaar
Prepare a small integration package for a web development team.
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
PWA Icon Generator FAQ
Which PWA sizes are required?
Chromium guidance calls for at least 192×192 and 512×512 raster icons. Other sizes can improve platform-specific presentation.
Does the ZIP include a full manifest?
No. It includes the icons array fragment so you can review paths and merge it into your application manifest.
What purpose value is used?
The standard package uses purpose any. Create a separately tested maskable icon for purpose maskable.
Can I use an SVG icon?
Some browsers support SVG manifest icons, but raster PNG fallbacks remain important for broad compatibility.
Why use a solid background?
Transparent presentation may be composited differently by platforms. A deliberate full-bleed background gives predictable general-purpose artwork.
Do files leave my device?
No. All decoding, resizing, PNG encoding, JSON creation, and ZIP packaging happen in the browser.
How do I test installation?
Serve the manifest and icons from valid URLs over HTTPS, use browser developer tools, and install on representative desktop and mobile systems.
Primaire referenties
Actuele platformdocumentatie
- web.dev: Add a web app manifest
- W3C Web Application Manifest specification
- MDN: CanvasRenderingContext2D drawImage
Laatst beoordeeld: 20 oktober 2026. Platformvereisten en toolwijziging; verifieer release-kritieke assets aan de hand van de huidige primaire documentatie.