How to Add a Favicon in HTML

Add a favicon to an HTML page

A favicon is the small site icon that browsers can display in places such as tabs and bookmarks. The standard HTML mechanism is a <link> element with rel="icon" in the document <head>.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My Website</title>
    <link rel="icon" href="/favicon.ico">
  </head>
  <body>
    <h1>My Website</h1>
  </body>
</html>

The href="/favicon.ico" value points to a favicon at the website root. You can use a different supported image format and path when that better matches your project.

Choose where the favicon file lives

The href value is a URL. Its meaning depends on the path you give it, so the most common mistake is putting the icon in one directory and pointing the HTML at another.

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

With that structure, the root-relative form href="/favicon.ico" works when the site is served from the domain root.

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

For an icon next to the HTML file, a relative URL also works:

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

For an icon inside an images directory:

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

Use a PNG favicon

PNG is a practical choice when you want a transparent, lossless image. A basic declaration is:

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

The type attribute identifies the image MIME type. Browsers can often determine the type from the resource itself, but declaring it can make the intended format explicit.

Use an ICO favicon

ICO remains a common favicon format and can contain multiple icon sizes. A simple declaration is:

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

Browsers also have a long-standing convention of requesting /favicon.ico at the site root even when no explicit <link rel="icon"> is present. Explicitly declaring the icon is preferable when the file is somewhere else or when you want the document to state its intended icon resource.

Use an SVG favicon

SVG can be useful for a scalable vector icon. When the SVG is intended to be the icon resource, you can declare it with type="image/svg+xml" and sizes="any".

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

Specify icon sizes when you provide multiple icons

A page can provide more than one rel="icon" resource. The browser can use attributes such as type, sizes, and media when selecting an appropriate icon.

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

The sizes value describes the intrinsic icon dimensions. For a vector icon, sizes="any" indicates that it can be scaled.

A practical multi-icon setup

For a conventional website, you may choose a small set of explicitly named assets rather than generating a large collection of nearly identical files. For example:

public/
├── favicon.ico
├── favicon-32.png
├── favicon-48.png
└── apple-touch-icon.png

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

Do not add every possible size just because a generator can produce them. Add resources that serve an actual browser, device, or product requirement.

Add an Apple touch icon when you need it

A favicon and an Apple home-screen icon are related but are not the same link relation. If your site needs a dedicated icon for Apple home-screen use, you can provide rel="apple-touch-icon".

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

This does not replace the normal rel="icon" declaration. It supplies a different resource for a different usage context.

Do not confuse a favicon with a web app manifest

A web app manifest describes a web application and can contain application icons. It is not a replacement for the ordinary document favicon declaration. If your site is also a web app, you may have both:

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

Treat the favicon, touch icon, and manifest as separate pieces of the site metadata architecture. Add each one for the platform or capability that actually requires it.

Make the favicon useful in Google Search

Google can use a site's favicon in organic search results, but providing a favicon does not guarantee that Google will display it. Google currently documents several requirements: the favicon must be associated with the site's home page, be crawlable, use a square 1:1 image, and be at least 8×8 pixels; Google recommends a size larger than 48×48 pixels for better presentation.

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

For search visibility, keep the favicon URL stable and make sure both the home page and the favicon can be crawled. Google defines the site for this purpose by hostname, so a favicon for a subdirectory does not create a separate search-result favicon for that subdirectory.

Use a stable favicon URL

Avoid changing the favicon filename or URL without a reason. A stable URL makes caching and discovery simpler and matches Google's current guidance for search-result favicons.

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

If you replace the image while keeping the URL, browsers may continue to show a cached version temporarily. That is usually a caching issue, not an HTML syntax problem.

Troubleshoot a favicon that does not appear

If the favicon is missing, check the problem from the URL outward rather than immediately changing the HTML.

1. 1

   Open the favicon URL directly in the browser and confirm that the image loads.

2. 2

   Check the spelling and capitalization of the filename. Case-sensitive servers can distinguish between favicon.png and Favicon.png.

3. 3

   Verify that the path is correct for the page URL. Relative paths are resolved from the document URL, not from your project directory on disk.

4. 4

   Inspect the browser developer tools Network panel for a failed favicon request and its HTTP status.

5. 5

   Confirm that the server returns the icon with an appropriate image media type and does not block access with authentication or routing rules.

6. 6

   If the icon changed recently, test in a private window or clear the relevant browser/site cache before concluding that the new icon is invalid.

7. 7

   If the problem is specifically in Google Search, remember that Google must recrawl the home page and favicon before the search result can change.

Check the path before changing the markup

Suppose your files are arranged like this:

site/
├── pages/
│   └── about/
│       └── index.html
└── images/
    └── favicon.png

This declaration inside pages/about/index.html points to the root-level images directory:

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

A relative version from the same page could instead require moving up from the page directory:

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

A complete example

Here is a small HTML document with a PNG favicon and a separate stylesheet:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Favicon Example</title>
    <link rel="icon" href="/favicon.png" type="image/png">
    <link rel="stylesheet" href="/styles.css">
  </head>
  <body>
    <main>
      <h1>My website</h1>
      <p>The browser can use the linked favicon for this site.</p>
    </main>
  </body>
</html>

Try it yourself

This example uses an SVG file so the runnable example remains self-contained. In a normal website, you can use a PNG or ICO file instead.

The shortest answer

If you already have a favicon file at the website root, the essential HTML is simply:

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

Put it inside the <head> of the HTML document. For a PNG or another format, change the filename and, when useful, declare the corresponding MIME type.

Summary

A favicon is linked to an HTML document with <link rel="icon">. The important part is not a special HTML attribute called favicon—there is none. The browser is told that the linked resource represents the current document through the icon link relation. Once the URL is correct and the resource is publicly fetchable, the browser can select the icon according to the resources you provide.