HTML Favicon
A favicon is the tiny icon next to your page title in the browser tab. Modern browsers expect multiple sizes for desktop, mobile, and dark mode.
Modern favicon setup
EXAMPLE
<!-- In <head> -->
<link rel='icon' href='/favicon.ico' sizes='32x32' />
<link rel='icon' type='image/svg+xml' href='/icon.svg' />
<link rel='apple-touch-icon' href='/apple-touch-icon.png' />
<link rel='manifest' href='/site.webmanifest' />
<!-- icon.svg should be a single-colour SVG; CSS controls light vs dark -->
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>
<style>
path { fill: #1f2937; }
@media (prefers-color-scheme: dark) {
path { fill: #f9fafb; }
}
</style>
<path d='M20 20 H80 V80 H20 Z' />
</svg>
<!-- site.webmanifest (basic) -->
{
'name': 'My Site',
'short_name': 'Site',
'icons': [
{ 'src': '/android-chrome-192x192.png', 'sizes': '192x192', 'type': 'image/png' },
{ 'src': '/android-chrome-512x512.png', 'sizes': '512x512', 'type': 'image/png' }
],
'theme_color': '#1f2937',
'background_color': '#ffffff',
'display': 'standalone'
}
Why it matters
In 2026 you want one SVG icon plus a couple of PNGs. The SVG handles desktop tabs and dark mode for free; the PNGs cover home screens on phones. Tools like realfavicongenerator.net produce a clean bundle in one click.
Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.
Example
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Favicon</title>
</head>
<body>
<h1>HTML Favicon</h1>
<p>This is a demo page for the "HTML Favicon" lesson.</p>
</body>
</html>
Try it Yourself »
Exercise
Tell the browser this is the page icon shown in the tab.
<link rel="
" href="/favicon.ico">
The rel attribute value for site icons.
Discussion
Loading…