Check a manifest like a browser would
A <script type="application/json"> is never run, so it's a handy place to keep data in a page. DevTools → Application → Manifest does these checks for real.
A small set of icon links (an ICO, an SVG and a 180px Apple icon), a theme-color meta tag and a manifest.webmanifest file give your site its icon on tabs, bookmarks and home screens, and let it be installed like an app.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write the head tags for a site's icons: an ICO fallback, an SVG, an Apple icon and a manifest, plus a light and a dark theme colour (#1d4ed8 and #0b1120).
Write a manifest for a to-do app called Tickit that opens /today in standalone mode, with a white background, a blue theme and the two required icon sizes.
Explain it without notes
Which icon files does a modern site need, and what is each one for?
What does theme-color do, and how do you give different colours for light and dark mode?
What fields does a manifest need for a site to be installable in Chrome?
What is a maskable icon and why does it need a safe zone?
Preview
Console
Nothing logged yet.Expected console output
has a name: true
has start_url: true
app-like display: true
192px icon: true
512px icon: true
maskable icon: false