HTML

HTML (HyperText Markup Language) is the foundation of every website. It defines the structure of web pages and works seamlessly with CSS and JavaScript to create interactive and visually appealing sites. Let's start coding today! 🚀

HTML Favicon

29 March 2025 | Category:

What Is an HTML Favicon?

A favicon (short for “favorite icon”) is a small icon displayed in the browser tab next to the website’s title. Favicons enhance the branding of a website and make it easily recognizable among multiple open tabs or bookmarks.

Adding a Favicon to Your Website

The <link> tag inside the <head> section of your HTML document is used to specify the favicon.

Basic Syntax:

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

Steps to Add a Favicon

  1. Prepare the Favicon Image:
    • Create a square image (recommended size: 16x16px, 32x32px, or 48x48px).
    • Save the image in ICO, PNG, SVG, or GIF format.
  2. Place the Favicon in Your Project:
    • Place the favicon file in the root directory of your website (e.g., favicon.ico).
  3. Add the Favicon to the HTML: <head> <link rel="icon" href="favicon.ico" type="image/x-icon" /> </head>

Examples of Favicon Integration

Example 1: Using a PNG File

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

Example 2: Using an SVG File

<link rel="icon" href="favicon.svg" type="image/svg+xml" />

Example 3: Alternate Sizes for High-Resolution Screens

You can provide multiple favicon sizes for better compatibility:

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

Fallback for Older Browsers

For older browsers that default to favicon.ico:

  1. Name the favicon file favicon.ico.
  2. Place it in the root directory. Browsers will automatically detect it without needing the <link> tag.

Favicon Best Practices

  1. Use Modern Formats:
    • While .ico is widely supported, consider using modern formats like .png or .svg for better quality.
  2. Test Your Favicon:
    • Ensure it appears correctly in different browsers and devices.
  3. Compress the Favicon:
    • Optimize the favicon to reduce file size and improve page load times.
  4. Brand Alignment:
    • Use a simple design that aligns with your website or company branding.

Example of a Complete HTML Document with a Favicon

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My Website</title>
  <link rel="icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This page includes a favicon!</p>
</body>
</html>