Welk bestandsformaat is het beste voor PWA?

PNG is de standaard. Transparante PNG's zijn de beste keuze voor compatibiliteit.

Wat is een 'Maskable' icoon?

Het is een icoon dat Android toelaat om deze in verschillende vormen bij te snijden zonder het originele logo te schaden.

Welke iconen moeten in manifest.json?

Ten minste 192x192 en 512x512. Onze tool geeft je het volledige code-blok.

Waarom verschijnt het PWA icoon niet na installatie?

Meestal is een verkeerd pad in manifest.json de oorzaak. Zorg dat de paden exact overeenkomen met je projectmappen.

PWA Icon Generator (Gratis, Snel en Privé)

Name: PWA Icoon Generator: Maak van je Web App een Meesterwerk
Author: Pixes

Make your PWA look native on all platforms with correct icon sizes and maskable padding.

Privacy voorop

Bestanden verlaten je browser nooit
Geen serverupload
Lokaal verwerkt op je apparaat

Wat is een PWA icoon en waarom is een 'Maskable Icon' nodig?

Dit is het visuele symbool van je webprogramma wanneer het 'geïnstalleerd' wordt op het startscherm of bureaublad. In tegenstelling tot klassieke sites, worden PWA's gedefinieerd via het manifest.json bestand, waarin de 'PWA icoon formaten' (meestal 192x192 en 512x512) gespecificeerd worden. En nu hebben de Android 'Maskable Icons' het spel veranderd. Ze hebben een vaste 'Safe Zone' rond het logo, waardoor het systeem het icoon in verschillende vormen kan uitsnijden zonder je branding te beschadigen. Onze generator handelt beide opties direct af, zodat je PWA visueel niet onderdoet voor native programma's uit de officiële winkels.

Waarom kiezen voor de PWA Icoon Generator van Pixes.app?

Compatibel met Google Chrome en W3C: We stemmen elke icoonnaam en -grootte af op de laatste standaarden voor een hoge Lighthouse-score.. Verwijder fouten zoals 'PWA icon is missing' in je automatische testen.

Manifest.json ondersteuning inbegrepen: We geven je niet alleen de plaatjes; we genereren de JSON-code voor de identificatie ervan.. Kopieer en plak, en sla de hele technische documentatie over.

Snel en simpel: Geen kosten, geen registratie en geen e-mails. Alleen resultaten van topkwaliteit in seconden.. Versnel je ontwikkelcyclus met onze geoptimaliseerde tool.

3 stappen naar een professionele PWA icoonset

Geen hoofdpijn meer over codering of browser-manifest bestanden. Leer hoe je je PWA-icoonproject in de browser voltooit.

Upload de master-icoon (512x512): Kies de afbeelding met de hoogste resolutie, bij voorkeur een PNG van 512x512 pixels. Klik op 'Kies afbeelding'.
Gegenereerde Maskable en standaard iconen: Zodra het bestand is geüpload, genereert onze tool tegelijkertijd versies voor 192x192 (algemeen), 512x512 (Splash Screen) en 'maskable-icon-512x512'.
Kopieer de manifest-snippet en download: We genereren de 'icons' array die je in je manifest.json-bestand moet plakken. Klik op 'Kopieer code' en download de volledige set als ZIP-archief.

Expert tips voor PWA iconen

Verbeter je Lighthouse score: Google Lighthouse verwacht iconen van 192x192 en 512x512, evenals minimaal één 'maskable'. Onze tool geeft precies deze set voor 100/100 punten.

Keuze achtergrond voor Splash Screen: Gebruik een icoon met transparante PNG-achtergrond zodat deze perfect past bij de 'background_color' instelling in je manifest.

Logo marge (Safe Zone): Zorg dat het logo gecentreerd is met een marge van minimaal 10%. Pixes.app doet dit automatisch voor je.

Wie zou onze PWA Icoon Generator moeten gebruiken?

Frontend en Full-Stack developers: Bij het converteren van React, Vue of Angular projecten naar PWA's verspil je geen tijd aan iconen. Krijg hier direct je manifest-ready set.

📱 Mobile-First startups: Voordat je native apps lanceert, test je je branding met een perfect geschaalde PWA icoonset.

🛒 E-Commerce en SaaS bedrijven: Moedig gebruikers aan om 'Zet op beginscherm' te gebruiken met een icoon dat de kwaliteit van je merk uitstraalt.

Privacy-georiënteerde projecten: Omdat het hele proces aan de client-side gebeurt, verlaat jouw vertrouwelijke data nooit je computer.

Hoe deze tool te gebruiken

Kies de afbeelding met de hoogste resolutie, bij voorkeur een PNG van 512x512 pixels. Klik op 'Kies afbeelding'.
Zodra het bestand is geüpload, genereert onze tool tegelijkertijd versies voor 192x192 (algemeen), 512x512 (Splash Screen) en 'maskable-icon-512x512'.
We genereren de 'icons' array die je in je manifest.json-bestand moet plakken. Klik op 'Kopieer code' en download de volledige set als ZIP-archief.

Gerelateerde tools

Veelgestelde vragen (FAQ)

Welk bestandsformaat is het beste voor PWA?: PNG is de standaard. Transparante PNG's zijn de beste keuze voor compatibiliteit.
Wat is een 'Maskable' icoon?: Het is een icoon dat Android toelaat om deze in verschillende vormen bij te snijden zonder het originele logo te schaden.
Welke iconen moeten in manifest.json?: Ten minste 192x192 en 512x512. Onze tool geeft je het volledige code-blok.
Waarom verschijnt het PWA icoon niet na installatie?: Meestal is een verkeerd pad in manifest.json de oorzaak. Zorg dat de paden exact overeenkomen met je projectmappen.