HTML Favicon – A Complete Guide with Examples & Best Practices

A favicon (short for “favorite icon”) is the small icon displayed in the browser tab, bookmarks, and address bar. It helps in website branding and improves user experience.

Where Do Favicons Appear?

Browser tabs
Bookmarks
Browser history
Mobile home screens (when a site is saved)

Even though it is small, a favicon plays a big role in branding and user experience.
It helps users quickly recognize your website among many open tabs.

For beginners learning HTML, adding a favicon is a simple but professional touch that makes a website look complete and trustworthy.

What Is a Favicon in HTML?

A favicon (short for favorite icon) is a small image linked to a webpage using HTML.

Technically:

It is an image file (PNG, ICO, SVG, etc.)
It is added inside the <head> section
Browsers automatically display it in tabs and bookmarks

Why Every Website Should Have a Favicon

Helps users identify your site quickly
Improves brand recognition
Makes your website look professional
Enhances user experience

Example:

Google → “G” icon
YouTube → Red play icon

Supported Favicon File Formats

Format	Recommended	Notes
`.ico`	✅ Yes	Supported by all browsers
`.png`	✅ Yes	Best for modern websites
`.svg`	⚠️ Limited	Not supported in all browsers
`.jpg`	❌ No	Not recommended

👉 Best choice for beginners: PNG or ICO

Standard Favicon Sizes

Purpose	Size
Browser tab	16×16 or 32×32
High-resolution screens	48×48
Mobile home screen	180×180

💡 Always use a square image.

Step-by-Step: How to Add a Favicon in HTML

Step 1: Create or Choose a Favicon Image

Use a logo, letter, or symbol
Keep it simple (details are hard to see at small sizes)
Save as favicon.png or favicon.ico

Step 2: Place the Favicon File

You can place the file:

In the root folder
Or inside an images folder

Example:

Complete HTML Example with Favicon

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Website</title>

  <!-- Favicon -->
  <link rel="icon" href="images/favicon.png" type="image/png">
</head>
<body>

  <h1>Welcome to My Website</h1>
  <p>This website has a favicon.</p>

</body>
</html>

Result

The favicon appears in the browser tab
The website looks branded and professional

Adding Multiple Favicons (Best Practice for Devices)

To support different screen sizes and devices:

<link rel="icon" href="favicon-16.png" sizes="16x16" type="image/png">
<link rel="icon" href="favicon-32.png" sizes="32x32" type="image/png">
<link rel="apple-touch-icon" href="apple-touch-icon.png">

👉 This ensures correct display on:

Desktop browsers
Mobile devices
Apple home screens

Where Favicons Appear (Real-World View)

Favicons are visible in:

Browser tabs
Bookmark lists
Browser history
Mobile shortcuts

This helps users recognize and return to your site easily.

Old Method (Still Works but Not Recommended)

<link rel="shortcut icon" href="favicon.ico">

⚠️ Works, but modern rel="icon" is preferred.

Common Beginner Mistakes

Placing favicon code outside <head>
Using large image sizes
Incorrect file path
Expecting instant update without cache clearing
Using JPG images

Best Practices for Favicons

✔️ Use ICO, PNG, or SVG formats for better support.
✔️ Keep the favicon simple (avoid too many details).
✔️ Place the favicon.ico file in the root directory.
✔️ Use multiple sizes for better device support.

FAQs: HTML Favicon

What is a favicon in HTML?

A small icon that represents a website in browser tabs and bookmarks.

Is favicon mandatory?

No, but it is highly recommended.

Why is my favicon not showing?

Clear cache, check file path, and verify image format.

Can I use SVG as a favicon?

Some browsers support it, but PNG or ICO is safer.

Where should favicon code be placed?

Inside the <head> section.