Tagg the Builder saysA favicon is the little icon in the browser tab — set it with a <link rel="icon"> in the head.
The favicon brands your tab, bookmarks, and history. Add <link rel="icon" href="favicon.ico"> (or a PNG/SVG) in the head. Modern sites also supply an apple-touch-icon for home-screen shortcuts on iOS.
SVG favicons scale crisply and can even respond to dark mode. A 32×32 PNG is a safe baseline that every browser understands.
Power-ups you unlock
<link rel="icon" href="..."> in <head>
.ico, .png, or .svg all work in modern browsers
apple-touch-icon covers iOS home-screen shortcuts
SVG favicons scale and can adapt to dark mode
The Unclosed Tag attacks — common mistakes
Expecting the favicon inside an iframe/sandbox preview (only real tabs show it)
Using a giant PNG when 32×32 is plenty
Forgetting to bust the cache — browsers cache favicons aggressively
Boss battleOpen this example in a real browser tab (popout) and watch the violet square appear as the favicon.
Example code
<!doctype html>
<html><head><meta charset="utf-8">
<title>check the tab icon</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect width='16' height='16' fill='%23b388ff'/></svg>">
</head>
<body><h1>popout to a real tab to see the violet favicon</h1></body></html>