Frontend is a free bonus on CodeMentor AI β the main product is Python. Register to save your progress and unlock all 290 Frontend lessons + 1,000+ Python lessons.Sign up β free
TaskAdd three head elements: link rel='icon' href='/favicon.svg', link rel='apple-touch-icon' href='/apple-touch-icon.png', and meta name='theme-color' content='#0D1117'.
Favicon and theme-color (the tab strip details)
75 XP6 minFREE
Theory
Three small tags that make a site feel finished
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="apple-touch-icon" href="/apple-touch-icon.png" /> <meta name="theme-color" content="#0D1117" />
What each does
- `<link rel="icon">` β the tiny icon shown in browser tabs, bookmarks, and history. SVG works in modern browsers and scales perfectly to any retina display. Fall back to
.icofor legacy browsers if you care about IE11 / very old Android. - `<link rel="apple-touch-icon">` β when a user adds your site to their iPhone home screen, this is the icon they see. iOS ignores favicons and reads only this. Must be a 180Γ180 PNG.
- `<meta name="theme-color">` β colors the address bar on Chrome Android (matches your hero gradient). On iOS Safari it colors the status bar in standalone mode. Subtle but moves the needle on "this feels native."
Dark mode aware
You can target by color scheme:
<meta name="theme-color" content="#FFFFFF" media="(prefers-color-scheme: light)" /> <meta name="theme-color" content="#0D1117" media="(prefers-color-scheme: dark)" />
Two tags, two values. Chrome picks whichever matches the OS theme.
Live preview