Favicon and Apple Touch Icon
Add icons that appear in browser tabs and on home screens.
What Is a Favicon?
A favicon is the small icon that appears in:
- Browser tabs
- Bookmark lists
- Browser history
- Search results (sometimes)
It helps users identify your site at a glance among multiple open tabs.
Basic Favicon Link
Add a favicon with a link element in head:
<head>
<!-- SVG favicon (modern, scales at any size) -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<!-- PNG fallback -->
<link rel="icon" type="image/png" href="/favicon.png">
<!-- Legacy ICO for Internet Explorer -->
<link rel="shortcut icon" href="/favicon.ico">
</head>All lessons in this course
- title and its Role in SEO
- meta charset viewport author and description
- Canonical URLs and robots meta
- Favicon and Apple Touch Icon