HTML Tutorial

HTML favicon

HTML Favicon

A favicon (short for "favorite icon") is a small icon that appears in the browser tab, bookmark list, and other browser UI. It helps users identify your website visually.

Why Use a Favicon?

Favicons improve branding and user experience. They help users easily recognize and switch to your website among multiple open tabs.

Syntax

You add a favicon using the <link> tag inside the <head> section of your HTML document.

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

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Favicon Example</title>
    <link rel="icon" type="image/x-icon" href="favicon.ico">
  </head>
  <body>
    <h1>Check the browser tab for favicon</h1>
  </body>
</html>

Favicon File Formats

.ico – Most widely supported format
.png – Modern browsers support PNG favicons
.svg – Scalable vector format, ideal for high-resolution screens

Tips

Keep the favicon simple and recognizable
Use 16×16 or 32×32 pixels size for best compatibility
Place the favicon file in the root folder for easy reference

Conclusion

A favicon gives your website a visual identity in the browser tab. Adding one is a small but important step in professional web design.

🌟 Enjoyed Learning with Us?

Help others discover Technorank Learning by sharing your honest experience.
Your support inspires us to keep building!

Leave a Google Review

Topics