A favicon is the small square icon displayed next to your page title in browser tabs, bookmark bars, and search results. Adding a favicon builds brand recognition when visitors keep dozens of tabs open at once.
Place a link tag with rel="icon" inside the head element of every HTML page. Modern browsers support .svg, .png, and .ico favicon files cleanly.
SVG favicons scale smoothly on high-DPI Retina displays and can even respond to dark mode CSS media queries inside the SVG file. Adding a fallback apple-touch-icon ensures saved iOS home screen shortcuts stay sharp.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Favicon Example Page</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
</head>
<body>
<h2>Check Your Browser Tab</h2>
<p>The link elements inside head tell browsers which favicon files to fetch.</p>
</body>
</html>
Keep an .ico or 32x32 PNG icon alongside an svg icon for maximum compatibility, plus a 180x180 PNG for mobile shortcuts. Place favicon.ico in your website root directory so legacy browsers find it automatically even on cached routes.
link rel="icon" inside body: Icon metadata belongs strictly inside head.Ctrl+Shift+R) or bump ?v=2 on the URL when updating your icon.Provide a 32x32 PNG for standard desktop tabs and a 180x180 PNG for Apple touch home screen icons.
Browsers cache /favicon.ico longer than normal assets. Clear browser cache or test in a private window to confirm the change.
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With
Experiment with the code from this lesson in our interactive playground.