Welcome What's new in Chrome extensions API reference Samples
Welcome What's new in Chrome extensions API reference Samples

Fetching favicons

Published on

Overview

A 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:

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. For example: 16, 32, or 64.

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.

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

The "favicon" permission triggers a warning unless other similar permissions are already requested, such as "tabs" or host permission.

In addition, when fetching favicons in content scripts, the "_favicon/*" folder must be declared as a web accessible resource. 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() 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.

function faviconURL(u) {
const url = new URL(chrome.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:

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 repository:

Updated on Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.