Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
A favicon (favorite icon) is the small icon displayed in browser tabs, bookmarks, and mobile home screens. It helps users identify your site quickly.
Browser Tabs
Bookmarks
Home Screen
Location of favicon in browser tab
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="favicon-demo">
<div class="browser-bar">
<div class="tab">
<span class="favicon">🌐</span>
<span class="title">My Website</span>
</div>
</div>
<div class="arrow">↑ Favicon appears here</div>
</div>
</body>
</html>Loading preview...
Standard, SVG, Apple Touch, and Manifest
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Standard favicon -->
<link rel="icon" href="/favicon.ico" sizes="32x32">
<!-- SVG favicon (modern browsers) -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Web App Manifest -->
<link rel="manifest" href="/manifest.json">
<title>Favicon Demo</title>
</head>
<body>
<h1>🎨 Favicons</h1>
<p>The small icon in your browser tab!</p>
</body>
</html>Loading preview...
16×16Browser tabs (standard)32×32Windows taskbar, Mac Dock180×180Apple Touch Icon (iOS)192×192Android Chrome512×512PWA splash screenAnySVG favicon (scalable)