HtmlHow-ToBeginner · 3 min read

How to Add Favicon in HTML: Simple Guide with Example

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

📐

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": specifies the file type (usually .ico, .png, or .svg).

html

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

💻

Example

This example shows a complete HTML page with a favicon added. The favicon file is named favicon.ico and placed in the same folder as the HTML file.

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>Welcome to My Website</h1>
  <p>Look at 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 favicons 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.
Forgetting to include the rel="icon" attribute.
Using unsupported file formats or incorrect type attribute.

Always check your favicon file is accessible and the path is correct.

html

<!-- Wrong way: link tag outside head and missing rel attribute -->
<link href="favicon.ico">

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

📊

Quick Reference

Here is a quick summary to remember when adding a favicon:

Step	Tip
1	Place `<link rel="icon">` inside `<head>`.
2	Use correct path in `href` to your favicon file.
3	Use supported formats: .ico, .png, or .svg.
4	Include `type` attribute for clarity.
5	Test in browser to see the favicon on the tab.

✅

Key Takeaways

Add the favicon using <link rel="icon" href="path" type="image/x-icon"> inside the <head>.

Make sure the favicon file path in href is correct and accessible.

Use common image formats like .ico, .png, or .svg for the favicon.

Place the <link> tag only inside the <head> section.

Check your favicon appears by looking at the browser tab after loading your page.