HTML Favicon

Learn how to add a small icon to your website tab.

What is a Favicon?

A favicon is a small icon displayed in the browser tab, bookmarks, and address bar.

Real-Life Example: Just like an app icon on your phone, a favicon represents your website.

Why is Favicon Important?

  • Helps users recognize your website
  • Improves branding
  • Makes browser tabs look professional
  • Improves user experience

How to Add a Favicon in HTML

Favicons are added inside the <head> section using the <link> tag.

Example: Adding a Favicon


<link rel="icon" type="image/png" href="favicon.png">

Note: Place the favicon file in your project root or images folder.

Supported Favicon File Formats

  • .png – Most recommended
  • .ico – Traditional format
  • .jpg / .jpeg – Supported but not ideal
  • .svg – Modern browsers

Using Multiple Favicons (Optional)

You can define different icons for different devices.

Example: Multiple Favicons


<link rel="icon" sizes="16x16" href="favicon-16.png">
<link rel="icon" sizes="32x32" href="favicon-32.png">

Common Favicon Mistakes

  • Wrong file path
  • Browser cache not cleared
  • Unsupported file format
  • Very large image size

Tip: Clear browser cache if favicon doesn’t update.

Best Practices for HTML Favicon

  • Use a square image
  • Recommended size: 32×32 or 64×64
  • Keep design simple
  • Use PNG for best results

Student Tip: Favicons are small but important for real-world projects.