HTML Favicon

by

An HTML favicon is a small icon associated with a website or web page. It is commonly displayed in the browser tab next to the page title. Favicons help users quickly identify a website when they have multiple tabs or bookmarks open.

A favicon is usually created as an image file and connected to an HTML document using the <link> element inside the <head> section.

What Is an HTML Favicon?

A favicon is a small visual icon that represents a website.

For example, a website can use its logo as a favicon:

<link rel=”icon” href=”favicon.ico”>

The favicon is not displayed inside the main page content. Instead, the browser uses it as the website’s icon.

How to Add a Favicon in HTML

To add a favicon, place a <link> element inside the <head> section.

<!DOCTYPE html>
<html>
<head>

    <title>My Website</title>
    <link rel="icon" href="favicon.ico">

</head>
<body>

    <h1>Welcome to My Website</h1>

</body>
</html>

The browser will look for the favicon.ico file and use it as the page icon.

The HTML <link> Element

The <link> element is used to connect the HTML document to an external resource.

For a favicon, you can write:

<link rel=”icon” href=”favicon.ico”>

Here:

  • <link> defines a relationship with an external resource.
  • rel="icon" tells the browser that the resource is an icon.
  • href specifies the location of the favicon file.

Using PNG as a Favicon

You can also use a PNG image as a favicon.

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

For example, if your favicon is stored inside an images folder:

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

Using SVG as a Favicon

Modern browsers can also support SVG favicons.

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

SVG can be useful for logos and icons that need to remain sharp at different sizes.

Common Favicon File Formats

Several image formats can be used for favicons.

FormatExampleCommon Use
ICOfavicon.icoTraditional favicon
PNGfavicon.pngCommon modern option
SVGfavicon.svgScalable vector icon
GIFfavicon.gifLess common option

For most websites, PNG, ICO, or SVG are practical choices depending on browser support and project requirements.

Favicon Image Sizes

Favicons are displayed at small sizes, so the original icon should be designed to remain recognizable when reduced.

Common icon sizes include:

  • 16 × 16 pixels
  • 32 × 32 pixels
  • 48 × 48 pixels
  • 180 × 180 pixels for Apple touch icons

For a simple browser favicon, a 32 × 32 PNG or ICO is a common choice.

Favicon and Website Branding

A favicon can help strengthen website branding.

For example, a tutorial website can use its logo or a recognizable symbol as its favicon.

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

A consistent favicon makes the website easier to recognize in browser tabs and bookmarks.

Favicon Best Practices

Follow these practices when creating a favicon:

  • Use a simple and recognizable design.
  • Make sure the icon remains clear at small sizes.
  • Use an appropriate image format.
  • Place the favicon reference inside <head>.
  • Use a descriptive and correct file path.
  • Avoid unnecessarily complicated designs.
  • Test the favicon in different browsers and screen sizes.

Complete HTML Favicon Example

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>HTML Favicon</title>

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

</head>

<body>

    <h1>HTML Favicon</h1>

    <p>
        This page uses a favicon displayed in the browser tab.
    </p>

</body>

</html>

Common Mistakes with Favicons

Incorrect File Path

If the favicon is stored in an images folder, make sure the path is correct.

<link rel=”icon” href=”images/favicon.png”>

Placing the Link in the Body

The favicon link should be placed inside the <head> section.

Incorrect:

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

Correct:

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

Using a Low-Quality Image

A blurry or overly detailed image may not look good when displayed at a small size. Use a simple, high-quality icon.

HTML Favicon Cheat Sheet

CodePurpose
<link rel="icon" href="favicon.ico">Adds an ICO favicon
<link rel="icon" type="image/png" href="favicon.png">Adds a PNG favicon
<link rel="icon" type="image/svg+xml" href="favicon.svg">Adds an SVG favicon
rel="icon"Identifies the resource as an icon
hrefSpecifies the favicon location