An HTML favicon is a small visual icon displayed next to your website title in browser tabs, bookmark bars, and mobile shortcut screens. It helps users recognize your brand when managing multiple browser tabs.
You attach a favicon to an HTML page using the <link> tag inside the <head> section. Modern browsers support PNG, SVG, ICO, and WebP image formats for site icons.
<!-- Standard ICO favicon fallback -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- Modern PNG favicon -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<!-- Scalable SVG favicon for crisp rendering -->
<link rel="icon" type="image/svg+xml" href="/icon.svg">
<!-- Apple Touch Icon for iOS home screens -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
Key attributes for favicon declaration:
rel="icon": Specifies that the linked asset is a shortcut icon for the current web document.type: Defines the MIME media type of the image (e.g. image/svg+xml, image/png, image/x-icon).href: Specifies the relative or absolute file path to your favicon asset.sizes: Indicates target icon dimensions (e.g. 32x32 or 16x16).The browser checks the HTML head for explicit icon declarations before falling back to default root directory locations:
flowchart TD
A["Browser Loads HTML Page"] --> B{"Has <link rel='icon'> in <head>?"}
B -- Yes --> C["Load declared icon asset (SVG / PNG / ICO)"]
B -- No --> D["Request default /favicon.ico from site root"]
C --> E["Display icon in browser tab & bookmarks"]
D --> E
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Favicon Practical Demonstration</title>
<!-- SVG Favicon for modern crisp tab rendering -->
<link rel="icon" type="image/svg+xml" href="/assets/favicon.svg">
<!-- PNG fallback for legacy browsers -->
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
<!-- Apple home screen icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">
</head>
<body style="font-family: system-ui, sans-serif; background-color: #0f172a; color: #f8fafc; padding: 2rem;">
<h1>Website Favicon Setup</h1>
<p>Look at the browser tab at the top of your window to see the site icon in action!</p>
</body>
</html>
rel="apple-touch-icon" when users add your web application to their iPhone or iPad home screen.favicon.ico in the root folder: Even with explicit link tags, keep a fallback favicon.ico file in your root web server directory to handle legacy browser requests gracefully.Create a <head> element containing a primary SVG favicon (rel="icon"), a 32x32 PNG fallback, and an Apple Touch Icon link pointing to /apple-icon.png !
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.