HtmlHow-ToBeginner · 3 min read

How to Add Favicon to HTML: Simple Steps for Your Website

To add a favicon to your HTML page, include a <link> tag inside the <head> section with rel="icon" and the path to your icon file in href. For example, <link rel="icon" href="favicon.ico" type="image/x-icon"> adds a favicon named "favicon.ico".

📐

Syntax

The favicon is added using the <link> tag inside the <head> of your HTML document. Here is what each part means:

rel="icon": tells the browser this link is for the favicon.
href="path/to/favicon.ico": the location of your favicon file.
type="image/x-icon": the file type of the favicon (optional but recommended).

html

<link rel="icon" href="favicon.ico" type="image/x-icon">

💻

Example

This example shows a complete HTML page with a favicon named favicon.ico in the same folder as the HTML file. The favicon will appear in the browser tab.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Favicon Example</title>
  <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
  <h1>Hello, world!</h1>
  <p>Check the browser tab to see the favicon.</p>
</body>
</html>

Output

A webpage with the title 'Favicon Example' and a favicon icon visible in the browser tab.

⚠️

Common Pitfalls

Common mistakes when adding a favicon include:

Not placing the <link> tag inside the <head> section.
Using the wrong file path in href, so the browser can't find the icon.
Using unsupported file formats or missing the type attribute for clarity.
Forgetting to clear browser cache after updating the favicon, so changes don't show immediately.

html

<!-- Wrong: link tag outside head -->
<body>
  <link rel="icon" href="favicon.ico">
</body>

<!-- Right: link tag inside head -->
<head>
  <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>

📊

Quick Reference

Remember these tips when adding a favicon:

Use rel="icon" in the <link> tag.
Place the favicon file in your project folder and use the correct path.
Use common formats like .ico, .png, or .svg.
Clear browser cache to see updates.

✅

Key Takeaways

Add a tag inside the section.

Ensure the favicon file path in href is correct and accessible.

Use standard favicon formats like .ico or .png for best browser support.

Place the favicon file in your website folder or a reachable URL.

Clear browser cache after changing the favicon to see updates immediately.