An SVG favicon and the icon links
The preview runs inside this page, so you won't see its icon on your tab; on a real site you would. link.sizes is a list, so .value gives its text.
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
icon 32x32 /favicon.ico
icon image/svg+xml (inline SVG)
apple-touch-icon /apple-touch-icon.png
manifest /manifest.webmanifest
theme-color: #0f766e