How to Add a Favicon in HTML for Browser Tabs

A favicon is the small image shown in a browser tab, bookmarks, browser history, and sometimes shortcuts. You will learn how to create or use a favicon file, reference it from the HTML <head>, and handle common issues such as incorrect paths and browser caching.

A favicon (short for “favorite icon”) identifies a website visually in a browser.

Browsers look for favicon information in the document's <head> section. You provide that information with a <link> element whose rel attribute is "icon".

Modern browsers support several image formats, including:

• PNG: A simple and widely supported choice for most websites.
• ICO: A traditional favicon format that can contain multiple icon sizes in one file.
• SVG: A scalable format that stays sharp at different sizes, although support and design requirements should be checked for your target browsers.

You do not have to convert a PNG logo to .ico just to show it in a modern browser tab. A square PNG, such as 32 × 32 or 48 × 48 pixels, is usually enough.

The favicon link belongs in <head>, not inside <body>. The <head> contains page metadata and resource references; the <body> contains visible page content.

Think of a website as a book and the browser tab as the book's spine on a shelf. A favicon is the small symbol on that spine that helps readers recognize the book quickly.

The HTML <head> is the book's publishing information page. By placing a favicon <link> there, you tell the browser: “Use this image as this site's identifying symbol.”

Use a <link> element inside <head>:

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

Here is a complete HTML page:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My Portfolio</title>

    <link rel="icon" href="/images/logo.png" type="image/png">
  </head>
  <body>
    <h1>Welcome to my portfolio</h1>
  </body>
</html>

href="/images/logo.png" is the URL of the image file:

• A leading / means “start from the website's root folder.”
• If the image is next to the HTML file, use href="logo.png".
• If it is in an images folder relative to the current HTML file, use href="images/logo.png".

For an ICO file, use:

<link rel="icon" href="/favicon.ico" sizes="any">

A common convention is to place favicon.ico in the site's root directory. Some browsers may look for /favicon.ico automatically, but explicitly adding the <link> tag is clearer and more reliable.

Consider this document:

<!doctype html>
<html lang="en">
  <head>
    <title>Recipe Finder</title>
    <link rel="icon" href="/assets/recipe-icon.png" type="image/png">
  </head>
  <body>
    <p>Find a recipe.</p>
  </body>
</html>

When the browser opens the page:

1. It reads the <head> before rendering the page body.
2. It sees <title> and uses Recipe Finder as the tab text.
3. It sees the <link rel="icon"> element.
4. It requests the file at /assets/recipe-icon.png from the website.
5. If the file exists and is a supported image, the browser displays it as the tab icon.
6. The browser may store the image in its cache, so later changes to the favicon may not appear immediately.

Favicons are useful in nearly every kind of web project:

• Company sites: Display a recognizable brand mark in tabs and bookmarks.
• Web applications: Help users distinguish between tools such as an admin dashboard, email client, and project tracker when many tabs are open.
• Documentation sites: Show the product or project icon in bookmarks and browser history.
• Online stores: Reinforce brand recognition while users compare products in multiple tabs.
• Internal tools: Make staging, development, and production environments visually distinct by using different icons.

In a production codebase, developers usually keep site icons in a static or public-assets directory and reference them from the main HTML template.

For a plain static site, the root HTML document may contain:

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

For projects that generate HTML from templates, the same tag is often added once in a shared layout file. This ensures every page receives the favicon.

Teams also commonly provide multiple sizes for different devices and contexts:

<link rel="icon" href="/favicon-32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/favicon-192.png" sizes="192x192" type="image/png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">

When replacing a favicon after deployment, developers may add a version query string to encourage browsers to fetch the new file:

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

This is useful because favicon files are often cached aggressively.

Placing the tag in <body>

This is incorrect because the favicon is document metadata:

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

Place it inside <head> instead:

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

Using the wrong file path

If the browser requests a path that does not exist, no icon appears.

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

Verify that the deployed site actually contains the file at /images/favicon.png. Open that URL directly in the browser to test it.

Expecting an immediate update

You may replace favicon.png and still see the previous icon because the browser cached it. Perform a hard refresh, clear the browser cache, open a private window, or change the URL:

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

Using a non-square or overly detailed image

Favicons are displayed at very small sizes. A detailed wide logo can become unreadable. Use a simple, high-contrast, square version of the brand mark.

Forgetting to deploy the image file

Adding the HTML tag is not enough. The image itself must be included in the files uploaded or built for the website.

A PNG is generally the easiest starting point. Use ICO when you specifically need the traditional format or want to package several sizes together.

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

<!-- Traditional ICO favicon -->
<link rel="icon" href="/favicon.ico" sizes="any">

<!-- Explicit PNG sizes -->
<link rel="icon" href="/favicon-32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/favicon-192.png" sizes="192x192" type="image/png">

<!-- Apple home-screen icon -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">

• Put favicon <link> elements inside <head>.
• PNG files work in modern browsers; converting to ICO is optional.
• Use a square, simple image that remains recognizable at small sizes.
• Verify the href path by opening the image URL in the browser.
• If an updated icon does not appear, account for browser caching with a hard refresh or a version query string.

What is a favicon in HTML?

A favicon is a small website icon shown in browser tabs, bookmarks, history, and other browser interfaces. Add it with a <link rel="icon"> tag in <head>.

Where do I put the favicon tag?

Place it inside the HTML document's <head> element, usually near the <title> and other metadata.

Can I use a PNG as a favicon?

Yes. Modern browsers support PNG favicons. You can reference it with type="image/png".

Do I need to convert a PNG favicon to ICO?

No. ICO is a traditional format, but a PNG is sufficient for most modern websites. Use ICO only if it fits your compatibility or asset needs.

Why is my favicon not showing?

Check that the image path is correct, the image is available on the deployed site, the <link> is inside <head>, and the browser is not displaying a cached older icon.

What favicon size should I use?

Use a square image. A 32 × 32 PNG is a practical minimum for browser tabs; providing additional sizes can help in other contexts.

Can every page use the same favicon?

Yes. Add the same favicon reference to each page, or place it in a shared layout/template used to generate all pages.

• HTML <head> element — Contains metadata, titles, stylesheets, scripts, and links to page resources.
• HTML <link> element — Connects an HTML document to external resources such as icons and stylesheets.
• File paths and URLs — Correct relative and root-relative paths are essential for loading image assets.
• Browser caching — Explains why favicon changes may not appear immediately.
• Web app manifest — Provides application metadata and icons for installable web applications.
• Responsive images and image formats — Helps when selecting suitable image file types and sizes for the web.