when I use:

<img src="chrome://favicon/"/>

in my extension.It got something wrong.It warned

"Not allowed to load local resource:chrome://favicon/"

How can I fix it?

when I use:

<img src="chrome://favicon/http://www.google.com.hk"/>

in my extension.It got something wrong.It warned

"Not allowed to load local resource:chrome://favicon/http://www.google.com.hk"

How can I fix it?

• javascript
• google-chrome
• google-chrome-extension

• Why don't you simply add this image as a resource in your extension ? If necessary you then could call it with chrome.extension.getURL. – Denys Séguret Commented Apr 24, 2012 at 16:07
• Different people have different bookmarks.How can I get all images?"www.googel.com" is just an example.I want other icon too. – Tom Commented Apr 24, 2012 at 16:15
• You mean you want to fetch the favicon of a specific URL ? – Denys Séguret Commented Apr 24, 2012 at 16:19
• 1 If so, you may try to fetch thedomain.com/favicon.ico after having checked if the page contains something like this : <link rel="icon" type="image/png" href="../favicon.png"/>. I don't post it as an answer through, as I guess you'd prefer a more robust solution. That's just my 2 cents... – Denys Séguret Commented Apr 24, 2012 at 16:26
• I think fetching it from local maybe faster and what I need is just what local have.I have seen someone uses like that perfectly.So I wanna know why doesn't it work here? – Tom Commented Apr 24, 2012 at 16:39

4 Answers 4

Double-check to make sure you've added the "chrome://favicon/" permission.

Is this a "manifest_version" : 2 extension? I'm not familiar with them, but they may require that you specify a Content Security Policy that allows this.

I met the same problem. I tried and see that chrome://favicon/ only work with extension own pages such as popup or tabs your extension created. It doesn't work if you load it in the normal tabs from injected content script.

There are several ways if you want to load favicon from injected content script

1. The first ones is to use request to some sevices to get favicon of a web. For an example: http://www.google.com/s2/favicons?domain=https://stackoverflow.com/ This way works fine except the content script is injected in pages which are loading via https. The reason is due to Mixed Content blocking

2. The second ones is to load favicon in background from chrome://favicon/ then transfer to content script.

Example: This function is used to run in background script

function fetchFavicon(url) {
    return new Promise(function(resolve, reject) {
        var img = new Image();
        img.onload = function () {
            var canvas = document.createElement("canvas");
            canvas.width =this.width;
            canvas.height =this.height;

            var ctx = canvas.getContext("2d");
            ctx.drawImage(this, 0, 0);

            var dataURL = canvas.toDataURL("image/png");
            resolve(dataURL);
        };
        img.src = 'chrome://favicon/' + url;
    });
}

I'm using this way for my extension, and it's working fine. Please take a look at Super Focus Tabs extension.

Had the same issue, found out after searching on google developers site that you need to add a permission to the chrome://favicon/ in the manifest.json.

Then just go to chrome://extensions and press the reload to read manifest changes.

Note: the trailing slash is important!

Since MV3, you can no longer use chrome://favicon/. Instead you need the new Favicon Permission:

Add favicon to your permission

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

Access the favicon URL

For my simple case:

const favIconUrl = `chrome-extension://${chrome.runtime.id}/_favicon/?pageUrl=${encodeURIComponent(url)}&size=32`;

From their example:

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);

Note: when fetching favicons in content scripts, the "_favicon/*" folder must be declared as a web accessible resource. For example:

  "web_accessible_resources": [
    {
      "resources": ["_favicon/*"],
      "matches": ["<all_urls>"],
      "extension_ids": ["*"]
    }
  ]