Add a Favicon to a Static HTML Page

You will learn how browsers discover favicons, how to reference an icon from a static HTML page, why file paths and browser caches matter, and how to test the result using a web server rather than only opening an HTML file directly.

A favicon (short for “favorite icon”) is the small image a browser can show beside a page title in a tab, bookmark, history entry, or shortcut.

A browser can find a favicon in two main ways:

1. It reads a <link rel="icon"> element in the page’s <head>.
2. It may request a conventional file at /favicon.ico from the root of the website.

For a static page, the usual approach is to put an explicit <link> tag in the document’s <head>:

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

The href value is a URL, not simply a file name. A relative URL such as favicon.ico is resolved relative to the URL of the current HTML document. Therefore, it works only if the icon is actually available at that resulting location.

Favicons are also heavily cached by browsers. A correct change may appear not to work because Chrome is still showing an older icon, a previously missing icon, or a cached response. Testing through an HTTP server is more representative than opening a page with a file:// URL, especially for pages intended to be served during an outage.

Think of the HTML page as a document that gives the browser a set of directions. The favicon tag is a direction that says: “The tab icon is stored at this address.”

The browser then follows the address in href to fetch the image.

• href="favicon.ico" means “look next to this HTML page.”
• href="/favicon.ico" means “look at the top level of this website.”
• href="/assets/favicon.ico" means “look in the website’s assets folder.”

Browser caching is like a browser keeping a saved copy of the icon in a drawer. Even after you replace the file, the browser may continue using the saved copy until it decides to fetch a new one.

Place favicon links inside the <head> element of every HTML page that should use the icon.

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

  <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
  <h1>We will be back soon</h1>
  <p>The service is temporarily unavailable.</p>
</body>
</html>

With this folder structure, the relative path is correct:

maintenance/
├── index.html
└── favicon.ico

If the file is in an images directory instead, change the path:

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

If favicon.ico is deployed at the website root, use a root-relative URL:

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

For current browsers, rel="icon" is the important relationship. rel="shortcut icon" is a legacy form and is usually unnecessary.

You can also use PNG files, which are widely supported:

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

Consider this deployed structure:

public/
├── status/
│   ├── index.html
│   └── favicon.ico

The page is opened at:

https://example.com/status/

Its <head> contains:

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

What happens:

1. The browser requests https://example.com/status/.

2. It parses the HTML document.

3. It finds rel="icon".

4. The browser resolves favicon.ico relative to the page URL.

5. It requests:

   https://example.com/status/favicon.ico
   

6. If the server returns a valid icon file with a successful response, the browser can use it as the tab icon.

7. If Chrome already cached a previous result, it may not immediately request or display the new icon.

If the icon was instead located at https://example.com/favicon.ico, the correct tag would be:

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

• Maintenance pages: Show a recognizable company or product icon while the main application is offline.
• Documentation sites: Help users distinguish multiple documentation tabs.
• Admin dashboards: Use a different icon for production, staging, and local environments to reduce mistakes.
• Static error pages: Serve a favicon alongside static 404, 500, or maintenance HTML pages.
• Bookmarking: Give users a recognizable image when they bookmark a page.
• Progressive web apps: Provide multiple icons for tabs, shortcuts, and installed app experiences.

In real projects, favicon files are commonly placed in a public/static directory that the web server exposes directly.

A typical setup might look like this:

public/
├── favicon.ico
├── favicon-16x16.png
├── favicon-32x32.png
└── apple-touch-icon.png

Pages can then use root-relative paths:

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

For a standalone outage page, keep required assets close to the page or ensure the web server’s fallback configuration can serve them. A maintenance page is not useful if it references icons or styles from an application server that is down.

When replacing an existing favicon, teams often use a versioned URL to avoid cache confusion:

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

The query string changes the resource URL, encouraging the browser to fetch the updated file. Use this deliberately when deploying a new icon rather than changing it on every page load.

Putting the tag outside <head>

Keep favicon declarations in the document head.

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

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

Using the wrong relative path

If the HTML file is in a subfolder but the icon is at the site root, this looks in the wrong place:

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

Use a root-relative path when appropriate:

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

Assuming the server is serving the file

A file existing on your computer does not guarantee that it is reachable at the expected URL after deployment. Open the favicon URL directly in the browser or inspect it in the Network panel.

Testing only with file:// URLs

Opening index.html directly from the file system can behave differently from serving the page over HTTP. Run a local server for a more realistic test.

Forgetting favicon caching

A hard reload may not always update a favicon immediately. Try an incognito window, clear site data, close and reopen the tab, or use a versioned URL such as favicon.ico?v=2.

Mismatching the file and declared type

If the file is a PNG, do not describe it as an ICO file:

<!-- Incorrect if favicon.png is actually a PNG -->
<link rel="icon" href="favicon.png" type="image/x-icon">

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

Depending only on shortcut icon

This legacy declaration may work in some browsers, but use the standard relationship:

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

A relative path is based on the current page location, while a root-relative path is based on the website domain:

Page URL: https://example.com/status/index.html

favicon.ico      -> https://example.com/status/favicon.ico
/favicon.ico     -> https://example.com/favicon.ico

<!-- ICO file next to the HTML file -->
<link rel="icon" href="favicon.ico" type="image/x-icon">

<!-- ICO file at the website root -->
<link rel="icon" href="/favicon.ico" type="image/x-icon">

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

<!-- Force a new URL after replacing a cached icon -->
<link rel="icon" href="/favicon.ico?v=2" type="image/x-icon">

• Put the tag inside <head>.
• href must match the URL where the server exposes the file.
• Use rel="icon" for modern HTML.
• Test by visiting the icon URL directly.
• Prefer testing through http://localhost, not only by opening an HTML file directly.
• If an old icon appears, account for browser caching.

Why is my favicon not showing in Chrome?

Check that the <link rel="icon"> tag is inside <head>, that its resolved URL returns the icon successfully, and that Chrome is not showing a cached result.

Does favicon.ico have to be at the root of my website?

No. It can be anywhere if the href points to its correct URL. However, placing a copy at /favicon.ico is a useful convention because some browsers and tools look there automatically.

Can I use a PNG as a favicon instead of ICO?

Yes. Use rel="icon", point to the PNG file, and set type="image/png".

Why does the favicon work after deployment but not when I open the HTML file locally?

A page opened with a file:// URL is not served like a normal website. Relative URLs, browser security behavior, and caching can differ. Test with a local HTTP server.

Is rel="shortcut icon" required?

Usually no. Use rel="icon" as the primary, standards-based declaration.

How do I verify the favicon path?

Open the resolved icon URL directly in the browser. You can also use browser developer tools and inspect the Network panel for the favicon request.

Why is an old favicon still displayed?

Favicons are cached aggressively. Try a private browsing window, clear site data, or deploy the new file under a changed URL such as /favicon.ico?v=2.

• HTML <head> element — Contains metadata and resource links that configure a document.
• Relative URLs — Explain how paths such as favicon.ico are resolved from the current page URL.
• Root-relative URLs — Useful for shared assets served from the root of a website.
• Static file serving — Determines whether an HTTP server makes icon files and other assets reachable.
• HTTP caching — Explains why browsers can keep showing an old favicon after a file changes.
• Browser developer tools — Help inspect failed network requests and verify the favicon URL.
• HTML link element — The general mechanism used to associate external resources with a page.