What should I do about the "Manifest Issue" error I got when running a Lighthouse scan on my Webflow website?
TL;DR
- Create a valid manifest.json with required fields and icons.
- Upload the manifest and icons to Webflow’s Asset Manager.
- Add a tag in the Project Settings → Custom Code → Head Code section.
- Re-publish the site and verify the manifest loads properly in DevTools.
A "Manifest Issue" in a Lighthouse scan usually means your Webflow site lacks a valid web app manifest or the manifest is missing required attributes. This impacts your site's Progressive Web App (PWA) capabilities.
1. Understand What the Manifest Is
- A web app manifest is a JSON file that defines how your site appears when installed on a user's mobile device or desktop.
- It contains details like the site's name, icons, background color, and display orientation.
- Lighthouse flags a "Manifest Issue" when the manifest is missing, inaccessible, or incomplete.
2. Check if a Manifest Exists
- Webflow does not automatically generate a manifest by default.
- Run your Lighthouse report again and check the full error message for clues (e.g., "No manifest found" or "Manifest is missing required icon").
- Open your browser’s DevTools → Application tab → Manifest section to see if one is loaded.
3. Add a Custom Manifest File
To fix the issue, you must manually add a manifest to your Webflow site.
- Create a JSON file named
manifest.json. Here’s a simple structure: { "name": "My Web App", "short_name": "App", "start_url": "/", "display": "standalone", "background_color": "#ffffff", "theme_color": "#000000", "icons": [ { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" } ] }- Upload the manifest to Webflow:
- Go to the Asset Manager, upload
manifest.jsonand any referenced icons. - Add a reference to your manifest in the
<head>: - Go to Project Settings → Custom Code → Head Code.
- Add:
<link rel="manifest" href="/manifest.json"> - Re-publish your site.
4. Confirm the Manifest Loads Correctly
- Visit your live site in a browser.
- Open DevTools → Application → Manifest tab to verify it loads and shows all values.
- Re-run Lighthouse to confirm the issue is resolved.
5. Handle Icon Paths Properly
- Make sure the icons used in the manifest match the files you uploaded.
- Webflow stores assets at relative paths (e.g.,
/images/icon-192.png). Update thesrcfields accordingly after uploading.
Summary
To resolve the "Manifest Issue" in Lighthouse, manually create and upload a manifest.json, link it in your site’s <head>, and ensure it includes all required fields and icons. Webflow does not auto-generate this file, so you need to handle it manually for PWA compliance.