A [favicon](https://developer.mozilla.org/docs/Glossary/Favicon) (short for "favorite icon") is a small icon that is displayed in the browser's address bar. Favicons are typically used to identify and differentiate websites.
This article describes how to retrieve a website's favicon in a Manifest V3 extension.

## Accessing a website's favicon

To retrieve the favicon of a website, you need to construct the following URL:

```text
chrome-extension://EXTENSION_ID/_favicon/?pageUrl=EXAMPLE_URL&size=FAV_SIZE
```

`EXTENSION_ID`
:   The ID of your extension.

`EXAMPLE_URL`
:   The URL of the favicon's website.

`FAV_SIZE`
:   The size of the favicon. The most common size is 16 x 16 pixels.

The following steps describe how to construct this URL in a Chrome extension:

### Step 1: update the manifest

First, you must request the `"favicon"` permission in the [manifest](https://developer.chrome.com/docs/extensions/mv3/manifest).

    {
      "name": "Favicon API in a popup",
      "manifest_version": 3,
      ...
      "permissions": ["favicon"],
      ...
    }

> [!CAUTION]
> **Caution:** The `"favicon"` permission [triggers a warning](https://developer.chrome.com/docs/extensions/develop/concepts/permission-warnings.md.txt#permissions_with_warnings) unless paired with an existing permission (such as `"tabs"`) that supersedes it.

Favicons are treated as resources under your extension's origin. To expose them to the web, including if you will inject them into a web page from a [content script](https://developer.chrome.com/docs/extensions/mv3/content_scripts), you must declare them as [web accessible resources](https://developer.chrome.com/docs/extensions/mv3/manifest/web_accessible_resources). For example:

    {
      "name": "Favicon API in content scripts",
      "manifest_version": 3,
      "content_scripts": [
        {
          "matches": ["<all_urls>"],
          "js": ["content.js"]
        }
      ],
      "permissions": ["favicon"],
      "web_accessible_resources": [
        {
          "resources": ["_favicon/*"],
          "matches": ["<all_urls>"],
          "extension_ids": ["*"]
        }
      ]
      ...
    }

### Step 2: construct the URL

The following function uses [`runtime.getURL()`](https://developer.chrome.com/docs/extensions/reference/runtime#method-getURL) to create a fully-qualified URL pointing to the `"_favicon/"` folder. Then it returns a new string representing the URL with several query parameters. Finally, the extension appends the image to the body.

```javascript
function faviconURL(u) {
  const url = new URL(browser.runtime.getURL("/_favicon/"));
  url.searchParams.set("pageUrl", u);
  url.searchParams.set("size", "32");
  return url.toString();
}

const img = document.createElement('img');
img.src = faviconURL("https://www.google.com") 
document.body.appendChild(img);
```

This example is a `www.google.com` 32px favicon URL that includes a random extension ID:

```text
chrome-extension://eghkbfdcoeikaepkldhfgphlaiojonpc/_favicon/?pageUrl=https%3A%2F%2Fwww.google.com&size=32
```

## Extension examples

There are two favicon examples in the [chrome-extension-samples](https://github.com/GoogleChrome/chrome-extensions-samples/) repository:

- [Favicon popup](https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/api-samples/favicon) example.
- [Favicon content script](https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/sample.favicon-cs) example.