ImageConver · Day 18 · Platform icon guide
PWA Icon Sizes Guide
Plan PWA icons by separating general-purpose, maskable, monochrome, shortcut, and platform-specific artwork. A dependable baseline includes correctly declared 192×192 and 512×512 PNG icons, while installation quality depends on manifest paths, purpose values, safe zones, HTTPS delivery, and browser testing.
Direct antwoord
Wat deze pagina oplevert en waar het past
Plan PWA icons by separating general-purpose, maskable, monochrome, shortcut, and platform-specific artwork. A dependable baseline includes correctly declared 192×192 and 512×512 PNG icons, while installation quality depends on manifest paths, purpose values, safe zones, HTTPS delivery, and browser testing. This guide addresses web app manifest imagery. It does not make a site installable by itself, generate service workers, configure iOS touch icons automatically, guarantee app-store acceptance, or predict every browser and operating-system presentation.
Icon work is a delivery system, not a single resize. A platform may use the same identity in a store, launcher, notification, settings screen, browser tab, installed web app, shortcut, or operating-system search result. Each context can apply a different mask, density, cache, compositing rule, or validation step. The recommended icon system should therefore be treated as a tested derivative of an editable brand master.
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
Inventory installation targets and decide which icon purposes and shortcuts are actually needed.
- 2
Kies instellingen
Create separate full-bleed general and maskable artwork from an editable master.
- 3
Genereer activa
Declare source paths, exact sizes, MIME types, and purpose values in the manifest.
- 4
Valideer de levering
Run browser audits, inspect network delivery, install the PWA, and review real device surfaces.
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
- Installability criteria and icon handling vary among browser engines and operating systems.
- An icon file can be valid while its manifest URL, MIME type, or cache behavior is wrong.
- Maskable safe-zone compliance does not guarantee strong visual design.
- Apple touch icons and other platform-specific resources may still be needed outside the manifest.
Gebruiksgevallen
Waar deze pagina past in de productie
Levering van producten
Plan a new PWA icon package.
Compatibiliteit werk
Fix missing or blurry installed-app artwork.
Kwaliteitsbeoordeling
Add maskable imagery without breaking ordinary icons.
Overdracht van ontwikkelaar
Audit manifest paths and purpose declarations before launch.
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.
Decision framework
Build the icon set from requirements, not habit
Write down the supported operating systems, browser engines, application targets, project tooling, and distribution channels before selecting files. A list copied from an old blog can be internally consistent yet wrong for a current project. Official platform documentation and the project’s own build warnings are the controlling evidence.
Separate master artwork from delivery derivatives. The master remains editable and high resolution; platform files are reproducible outputs. Keep appearance variants and semantic layers distinct when the platform expects them. Do not ask a resize operation to invent foreground, background, monochrome, dark, or tinted design intent.
Use the table as a starting inventory, then remove assets the project genuinely does not consume and add only requirements supported by official documentation or validated target behavior. Every retained asset needs an owner, source, generation method, configuration reference, and test surface.
Run a release audit after integration. Confirm each generated file is present in the built package or deployed location, referenced by the correct metadata, served with the expected MIME type, and visible after a clean installation. Capture screenshots or build evidence for the supported target matrix.
Recheck guidance when platform tooling changes. Icon pipelines are unusually sensitive to new masks, appearance systems, asset-catalog formats, installation criteria, and store validation. Record the review date and do not present historical dimensions as timeless requirements.
| Purpose | Starting assets | Validation |
|---|---|---|
| General install | 192×192 and 512×512 PNG, purpose any | Manifest fetch and install audit |
| Maskable | Full-bleed PNG with essential content inside 40% radius safe zone | DevTools safe-area preview and real devices |
| Shortcuts | Context-specific icons declared on shortcut items | Installed shortcut surfaces |
| Apple Home Screen | Separate apple-touch-icon resources | Safari and physical devices |
Production checklist
Document the asset inventory and test matrix
Create an inventory before implementation. For each asset, record its platform context, logical purpose, pixel or point dimensions, scale factor, filename, source-art revision, background and alpha policy, configuration reference, and the application or browser that consumes it. This prevents two files with similar dimensions from being treated as interchangeable when their semantics differ.
Define a representative test matrix rather than checking only the developer’s primary device. Include the minimum and maximum supported operating-system versions, relevant density classes, at least one light and dark environment, required appearance or theme variants, and the installation or distribution channel. For web applications, include a clean browser profile and a reinstall after cache changes. For native applications, include a release-style build rather than only an editor preview.
Review small contexts independently. Open exported pixels at 100% scale, place them beside typical neighboring icons, and check silhouette, contrast, edge clarity, and recognition without relying on the app name. Record defects against the editable master so the next iteration changes the design source rather than painting corrections into generated derivatives.
Keep generation reproducible. Save the approved master, generator version or script, settings, official references, review date, and validation evidence together. Checksums can identify the exact files reviewed. If a platform rejects or transforms an asset, preserve the rejection message and resulting presentation because that evidence is more useful than guessing from a generic size list.
Plan maintenance ownership. Someone must recheck platform documentation, build warnings, installation behavior, and store validation when supported targets or tooling change. Retire obsolete files only after proving they are no longer referenced by source code, manifests, asset catalogs, deployment templates, cached application data, or release automation.
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 Sizes Guide FAQ
What is the minimum practical PWA icon set?
For Chromium installation, provide at least 192×192 and 512×512 raster icons and declare them correctly in the manifest.
What does purpose any mean?
It marks an icon for general presentation. It is the default purpose when no purpose is specified.
What does purpose maskable mean?
It tells the user agent that edge content can be cropped by a platform mask while essential content remains in the safe zone.
Should normal and maskable icons be separate?
Usually. Separate artwork lets the normal icon retain intentional whitespace while the maskable icon uses a full-bleed background.
Do I need a 1024×1024 icon?
It can improve high-resolution and platform-specific workflows, but Chromium guidance specifically calls for at least 192 and 512 pixels.
Can I use sizes any for SVG?
Manifest syntax supports scalable resources, but use raster fallbacks because implementation and installation behavior vary.
Why does the installed icon not update?
Browsers and operating systems cache manifest resources aggressively. Verify URLs, cache headers, manifest fetches, and reinstall behavior during testing.
Primaire referenties
Actuele platformdocumentatie
- web.dev: Add a web app manifest
- web.dev: Adaptive icon support with maskable icons
- W3C Web Application Manifest specification
Laatst beoordeeld: 20 oktober 2026. Platformvereisten en toolwijziging; verifieer release-kritieke assets aan de hand van de huidige primaire documentatie.