ImageConver

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.

256px werkvoorbeeldUpload artwork to preview output.

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. 1

    Inspecteer de bron

    Upload a high-resolution square source and choose a full-bleed background.

  2. 2

    Kies instellingen

    Set fit and padding while checking the 192-pixel and 512-pixel previews.

  3. 3

    Genereer activa

    Generate icons and the manifest icon list in one ZIP.

  4. 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

  1. web.dev: Add a web app manifest
  2. W3C Web Application Manifest specification
  3. MDN: CanvasRenderingContext2D drawImage

Laatst beoordeeld: 20 oktober 2026. Platformvereisten en toolwijziging; verifieer release-kritieke assets aan de hand van de huidige primaire documentatie.