Chrome Extension: Replacing Favicons

In my chrome extension, I’m trying to find and then replace a site’s favicon with a different favicon. I’m able to find the site’s favicon url, but I am stuck on how to actually replace it.

I tried using chrome.tabs.query and using it’s property of favIconUrl but I couldn’t get it to work, so I then used a method of getting the site’s favicon by going to This does get the url for the favicon, but I am confused on how to proceed to replace the favicon.


function colorTabs(command)
    var url = "";
    var addFaviconUrl;

    if ("left-key-toggle-feature" == command)
        chrome.tabs.query({currentWindow: true, active: true}, function(tabs)
            /* favicon url */
            addFaviconUrl = tabs[0].url;
            url += addFaviconUrl;

            /* what to do with url now? */


How to reference a file that is part of a Chrome extension from within JavaScript

I have a Google Chrome extension that contains only a single JavaScript file, which gets loaded for pages in a certain domain. The script is very simple, it just reads the innerHTML from a particular element, then changes the title of the page depending on what the element contained. Code below.

var status = document.getElementById("target-element").innerHTML.toLowerCase();
if(status.indexOf("string1") != -1){ //Using String.indexOf() to check for substring
    document.title = "Title A";
}if(status.indexOf("string2") != -1){
    document.title = "Title B";
}else{ //Running
    document.title = "Title C";

This part works fine, and I wanted to modify it so that it could also change a page’s icon as well. As the pages this script runs on don’t ever have an icon linked in their header to begin with, all I have to do is add it and set it’s relevant attributes. New version of the script with this implemented:

var status = document.getElementById("target-element").innerHTML.toLowerCase();
var iconLink = document.createElement('link');
iconLink.rel = "icon";
if(status.indexOf("string1") != -1){
    document.title = "Title A";
    iconLink.href = "icona.png";
}if(status.indexOf("string2") != -1){
    document.title = "Title B";
    iconLink.href = "iconb.png";
    document.title = "Title C";
    iconLink.href = "iconc.png";

While this does successfully add the link tag, the icon comes up as not found because chrome looks for it in /icon.png. I also tried ./icon.png, but the result was the same. What is the correct way to access a file that is part of a chrome extension?

Thank you for your time.

change icon of page action – Chrome extension

I have four .png images in my images folder:

  1. Default icon 256×256 (manifest:page_action:default_icon)
  2. Replacement icon: 128×128
  3. Test icon1: 12×12
  4. Test icon2: 256×256

I use the first icon by default. This works.
Replacing it with the second one, works too.
The third the same.

The fourth will not be picked up, therefore chrome picks the default one.
This must be a bug, otherwise I cannot explain it.
Because the fourth one, has the same format, size as the default icon…!?

But perhaps you guys know better, why the fourth png won’t be applied as an page_action icon?

Chrome icons

Icons should generally be in PNG format, because PNG has the best
support for transparency. They can, however, be in any format
supported by WebKit, including BMP, GIF, ICO, and JPEG. Here’s an
example of specifying the icons:

“icons”: { “16”: “icon16.png”,
“48”: “icon48.png”,
“128”: “icon128.png” }, You may provide icons of any other size you wish, and Chrome will attempt to use the best size where
appropriate. For example, Windows often requires 32-pixel icons, and
if the app includes a 32-pixel icon, Chrome will choose that instead
of shrinking a 48-pixel icon down. However, you should ensure that all
of your icons are square, or unexpected behavior may result.