How do you add a favicon to your HTML page
•8 min read
Here’s a complete step-by-step explanation — with code — on how to add a favicon to your HTML page 👇
🧩 What is a Favicon?
A favicon is the small icon displayed in a browser tab, bookmarks, and search results — it helps visually represent your website or brand.
⚙️ Step-by-Step: Add a Favicon to Your HTML Page
✅ Step 1: Prepare Your Favicon File
- Create or download your icon — usually 16×16 px or 32×32 px.
- Save it in your project folder (for example:
/images/favicon.ico). - Favicons can be in formats like
.ico,.png, or.svg.
✅ Step 2: Link the Favicon in the <head> Section of Your HTML
Here’s the basic HTML code 👇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
<!-- Favicon link -->
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
</head>
<body>
<h1>Welcome to My Website!</h1>
</body>
</html>
✅ Step 3: For Better Browser Compatibility
You can also include multiple favicon formats for different devices and browsers:
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="manifest" href="site.webmanifest">
✅ Step 4: Test Your Favicon
- Open your page in a browser and refresh.
- If it doesn’t show, clear your cache or use a new browser window.
- You can also test online using https://realfavicongenerator.net.
🧠 Pro Tip
Always place the favicon file in your project’s root directory, so it’s easily found by browsers even if not explicitly linked:
https://yourwebsite.com/favicon.ico
