Web app manifest-gids
Een webapp-manifest (site.webmanifest) is een JSON-bestand dat installeerbare browsers de naam, kleuren, weergavemodus van uw app vertelt en welke pictogramgroottes ze op het startscherm moeten gebruiken. Door het te koppelen met `<link rel='manifest' href='/site.webmanifest'>` worden de installatieprompts Chrome en Edge PWA op desktop en Android ingeschakeld. Combineer hem met 192×192 en 512×512 PNG-pictogrammen – beide geëxporteerd door de favicon generator – voor een complete PWA favicon-installatie.
Het web-app-manifest is een JSON-tekstbestand dat wordt aangeboden met het MIME-type `application/manifest+json`. Het staat op elke URL die u kiest, maar de conventie is /site.webmanifest in de domeinroot. Je koppelt het vanaf je HTML met `<link rel='manifest' href='/site.webmanifest'>` in het `<head>` element. De browser leest het manifest wanneer wordt geëvalueerd of er een installatieprompt moet worden weergegeven of hoe uw app na de installatie moet worden weergegeven.
De pictogrammenreeks is het meest favicon-relevante deel van het manifest. Elke invoer specificeert een bron (URL naar de afbeelding), afmetingen (pixelafmetingen), type (MIME-type) en optioneel doel ('elk', 'maskeerbaar' of 'elk maskeerbaar'). Geef minimaal een 192×192 PNG op voor het opstartpictogram en een 512×512 PNG voor het opstartscherm. Zonder deze zal Chrome geen installatieprompt tonen.
Het pictogram van 192×192 wordt gebruikt door Android Chrome in het app-opstartprogramma, de schakelaar voor recente apps en het meldingenpaneel wanneer uw PWA een webpushmelding verzendt. Het moet een PNG zijn, toegankelijk via de aangegeven URL zonder omleidingen, en geserveerd met de juiste CORS-headers als het zich op een ander domein bevindt dan uw manifest. De favicon generator exporteert android-chrome-192x192.png, klaar voor direct gebruik.
Het pictogram van 512×512 wordt gebruikt voor het PWA-opstartscherm dat wordt weergegeven terwijl de app wordt geladen na het starten van het startscherm, het voorbeeld van het installatiedialoogvenster in Chrome en Edge op het bureaublad, en het Chrome OS-app-opstartprogramma. Een ontbrekend 512×512-item in het manifest blokkeert de installatie niet, maar resulteert in een algemeen browserpictogram op het startscherm. Voeg het altijd toe voor een gepolijste installatie-ervaring.
Maskeerbare pictogrammen zijn een Android-specifieke verbetering. Het adaptieve pictogramsysteem Android past geometrische maskers (cirkel, cirkel, traan, afgeronde rechthoek) toe op app-pictogrammen, en de vorm verschilt per apparaatfabrikant. De randen van een standaard 'elk' pictogram kunnen door deze maskers worden afgekapt. Een 'maskeerbaar' pictogram bevat opvulling voor de veilige zone - houd de essentiële illustraties binnen 80% van het midden van de afbeelding (de veilige zone-cirkel) - zodat elk masker kan worden aangebracht zonder het logo af te knippen.
Om een maskeerbaar pictogram in het manifest te declareren, voegt u een tweede vermelding voor dezelfde grootte toe met `'purpose': 'maskable'`: `{ "src": "/android-chrome-512x512-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }`. Je kunt ook combineren: `'purpose': 'any maskable'` op één inschrijving. Genereer uw maskeerbare pictogram met extra opvulling met behulp van de maskeerbare exportoptie van de generator.
De velden naam en korte_naam bepalen hoe uw app wordt gelabeld op het startscherm en in de app-lade. `name` is de volledige app-naam die wordt weergegeven tijdens de installatieprompt. `short_name` is het label onder het pictogram op het startscherm. Houd het korter dan 12 tekens om afkapping op kleinere schermen te voorkomen. Beide velden zijn vereist om de installatieprompt te laten verschijnen.
Het thema_kleurveld stelt de kleur in van de adresbalk van de browser op Android Chrome wanneer de gebruiker naar uw site navigeert (niet alleen wanneer de PWA is geïnstalleerd). Het stelt ook de kleur van de werkbalk in in de standalone PWA-modus. Gebruik uw primaire merkkleur als hexadecimale waarde. Voeg een overeenkomende `<meta name='theme-color' content='#YOUR_COLOR'>` toe aan uw HTML voor browsers die de thema_kleur van het manifest niet lezen.
Het veld background_color bepaalt de achtergrondkleur van het opstartscherm die wordt weergegeven tussen de lancering van PWA en de eerste weergave van de inhoud van uw app. Stel deze zo in dat deze overeenkomt met de achtergrond van uw app (meestal wit of de primaire merkkleur) om schokkende flitsen te voorkomen. Als background_color niet overeenkomt met uw daadwerkelijke app-achtergrond, zien gebruikers een kleursprong tijdens het opstarten.
Het weergaveveld bepaalt hoe de PWA er na installatie uitziet. `standalone` verbergt de adresbalk en navigatieknoppen van de browser, waardoor de app eruitziet als een native app. `minimal-ui` behoudt een minimale navigatiebalk. `fullscreen` verwijdert alles inclusief de statusbalk. `browser` toont de volledige browsergebruikersinterface. Voor de meeste PWA's is `standalone` de juiste keuze. De installatieprompt verschijnt niet als het display is ingesteld op `browser`.
Het start_url-veld specificeert welke URL wordt geopend wanneer de gebruiker de geïnstalleerde PWA vanaf het startscherm start. Voeg dit altijd toe. Zonder dit opent Android de URL waar het manifest is ontdekt. Dit kan een deep-linkpagina zijn in plaats van uw startpagina. Gebruik `'start_url': '/'` voor de meeste sites, of een specifieke URL als uw app op een bepaalde route moet starten.
Het debuggen van manifestproblemen is eenvoudig in Chrome DevTools. Open DevTools (F12), navigeer naar het tabblad Toepassing en klik op Manifest in het linkerpaneel. Chrome toont een geparseerde weergave van uw manifest, eventuele parseerfouten, fouten bij het ophalen van pictogrammen en een checklist voor 'Installeerbaarheid' die uitlegt waarom de installatieprompt mogelijk niet wordt weergegeven. Veelvoorkomende problemen zijn onder meer het niet vinden van pictogrammen (404), het verkeerde MIME-type of het ontbreken van een 192×192-pictogram.
Voor een correcte weergave van het manifest zijn twee configuraties aan de serverzijde vereist. Eerst moet het bestand worden aangeboden met `Content-Type: application/manifest+json`. Ten tweede: als uw pictogrammen zich op een CDN bevinden of een andere oorsprong hebben dan het manifest, moeten de pictogramreacties de juiste CORS-headers bevatten (`Access-Control-Allow-Origin: *` of uw domein). Ontbrekende CORS-headers op pictogrambestanden zorgen ervoor dat de browser het manifest als ongeldig beschouwt.
Voor frameworks die het manifest automatisch genereren, controleert u of het gegenereerde bestand uw werkelijke pictogramgrootten en -kleuren bevat. Next.js genereert een manifest op basis van uw /app/manifest.ts-export. React maken De app genereert een /public/manifest.json. Vite genereert niet standaard een manifest; maak er handmatig een. Werk in alle gevallen de pictogrammenreeks bij zodat deze verwijst naar uw daadwerkelijke merkpictogrambestanden in plaats van naar de standaard tijdelijke pictogrammen.
Hoe het werkt
- 1
Genereer 192×192 en 512×512 PNG-pictogrammen
Upload uw 512×512 logo PNG of SVG naar de [favicon generator](tool:favicon-generator). Het downloadpakket bevat android-chrome-192x192.png en android-chrome-512x512.png, klaar voor direct gebruik.
- 2
Maak site.webmanifest
Maak een JSON-bestand met minimaal: `name`, `short_name`, `icons` (192 en 512 vermeldingen), `theme_color`, `background_color` en `display: 'standalone'`. Het generatorpakket bevat een vooraf ingevuld manifestsjabloon.
- 3
Serveer het manifest met het juiste MIME-type
Configureer uw server om .webmanifest-bestanden te serveren met `Content-Type: application/manifest+json`. Voeg op Apache `AddType application/manifest+json .webmanifest` toe aan .htaccess. Voeg op Nginx het MIME-type toe aan mime.types.
- 4
Koppel het manifest in HTML
Voeg `<link rel='manifest' href='/site.webmanifest'>` toe in uw `<head>`. Voeg ook `<meta name='theme-color' content='#YOUR_COLOR'>` toe voor browsers die het manifest thema_kleur niet lezen.
- 5
Verifieer met Chrome DevTools
Open Chrome DevTools > Applicatie > Manifest. Bevestig dat er geen fouten worden weergegeven en dat alle pictogrammen verdwijnen. Controleer het gedeelte Installeerbaarheid voor de exacte criteria waaraan wel of niet is voldaan voor de PWA-installatieprompt.
- 6
Test de installatieprompt
Navigeer op Android Chrome naar uw site. Als aan alle criteria is voldaan, toont Chrome een installatiebanner of een optie 'Toevoegen aan startscherm' in het browsermenu. Controleer na de installatie of de achtergrondkleur van het opstartscherm en het startschermpictogram correct worden weergegeven.
Probeer het nu
Genereer uw PWA-pictogrampakket
Favicon-generatorVeelgestelde vragen
Is een webapp-manifest vereist voor een basiswebsite?+
Nee – alleen als u de PWA installatie-naar-startscherm-prompt op Android en desktop Chrome/Edge wilt. Alleen favicon.ico verwerkt browsertabbladen. Voeg het manifest toe als u rijkere mobiele en desktop-installatie-ervaringen wilt inschakelen.
Welke pictogramgroottes staan er in het webapp-manifest?+
Minimaal: 192×192 (Android launcher) en 512×512 (opstartscherm en installatievoorbeeld). Voeg maskeerbare varianten van beide formaten toe voor adaptieve Android-pictogramondersteuning, en 384×384 als u extra dichtheidsdekking wilt.
Wat is het verschil tussen thema_kleur en achtergrondkleur in het manifest?+
thema_color stelt de adresbalk en de werkbalkkleur van de browser in. background_color stelt de achtergrondkleur van het opstartscherm in die wordt weergegeven vóór de eerste verf van uw app. Stel beide in zodat ze bij uw merk passen voor een naadloze installatie- en startervaring.
Waarom toont Chrome geen installatieprompt voor mijn PWA?+
De meest voorkomende redenen zijn: ontbrekend of ongeldig manifest, ontbrekend 192×192-pictogram, pictogrammen die 404 retourneren, manifest dat niet met het juiste MIME-type wordt weergegeven, of dat de site niet via HTTPS wordt weergegeven. Gebruik Chrome DevTools > Applicatie > Manifest om de exacte reden voor het mislukken van de installatie te zien.
Wat is een maskeerbaar pictogram en heb ik er één nodig?+
Een maskeerbaar pictogram bevat opvulling in de veilige zone, zodat Android ronde of cirkelvormige maskers kan aanbrengen zonder uw logo af te knippen. U hebt er een nodig om ervoor te zorgen dat uw startschermpictogram er correct uitziet op Android-apparaten die niet-vierkante, adaptieve pictogramvormen gebruiken. Declareer het met `'purpose': 'maskable'` in de array met manifestpictogrammen.
Kan ik SVG-pictogrammen gebruiken in het webapp-manifest?+
Chromium ondersteunt SVG in sommige manifeste pictogramcontexten, maar PNG is de universeel veilige standaard voor installatie-UI's tussen browsers. Vermeld altijd PNG 192 en 512 vermeldingen. Je kunt er zonder enige schade een SVG-vermelding naast toevoegen.
Hoe controleer ik of mijn webmanifest geldig is?+
Open Chrome DevTools (F12) > Toepassing > Manifest. Chrome toont parseerfouten, fouten bij het ophalen van pictogrammen en een volledige checklist voor installeerbaarheid. Los eventuele gerapporteerde problemen op en test vervolgens de installatieprompt opnieuw met behulp van de optie 'Toevoegen aan startscherm' in de adresbalk van Chrome.