What should I do about the "Manifest Issue" error I got when running a Lighthouse scan on my Webflow website?
TL;DR
- Create a manifest.json file with required metadata (name, start_url, icons, theme and background colors).
- Upload the file to Webflow’s Assets Panel and copy its URL.
- Add a <link rel="manifest"> tag with the file URL to the Head section in Project Settings.
- Publish the site and re-run Lighthouse to confirm the issue is resolved.
The “Manifest Issue” in a Lighthouse scan usually means your Webflow site is missing or has a misconfigured web app manifest file, which affects how your site appears when used as a Progressive Web App (PWA).
1. Understand the Manifest Requirement
- Web app manifests are JSON files that provide metadata (e.g., site name, icons, theme colors) for adding your site to a device’s home screen.
- Lighthouse expects a correctly linked manifest.json to improve PWA compatibility and performance scoring.
2. Confirm the Error Details
- Run Lighthouse in Chrome DevTools, then check the “PWA” section.
- Common errors include:
- No manifest found
- Start URL not defined
- Missing icons or background color
- Invalid JSON syntax
3. Add a Web App Manifest in Webflow
Webflow does not create a manifest file by default, so you must add one manually.
- Create a manifest.json file externally and host it on Webflow:
- You can use tools like realfavicongenerator.net to generate one.
- Go to Webflow Designer > Assets Panel, upload the manifest.json file.
- Copy the uploaded file’s URL from the asset settings.
4. Link the Manifest in the Head
- Go to Project Settings > Custom Code > Head Code.
- Add this line inside the <head> (do not include full HTML markup, just the following tag):
<link rel="manifest" href="YOURUPLOADEDMANIFEST_URL">
- Replace
YOURUPLOADEDMANIFEST_URLwith the actual asset URL.
5. Customize Your manifest.json
Make sure your manifest.json includes properties like:
"name"and"short_name""start_url"(recommended:"/")"display"(use"standalone"for app-like behavior)"background_color"and"theme_color""icons"(multiple sizes in PNG format)
6. Publish and Retest
- Publish your Webflow site again (it must be the live version).
- Re-run Lighthouse to verify the manifest issue is resolved.
Summary
To fix the “Manifest Issue” in Webflow, create and upload a manifest.json file, then link it in the site’s head using Project Settings. Ensure the file is valid and complete for proper PWA functionality.