Replace Firefox Default Favicon

The new default favicon for sites that don’t have a favicon is nothing more than a dotted square. In the past it resembled a piece of paper. Here are a couple options to replace the current favicon.  Add these lines to your userChrome.css in the chrome folder within your profile folder [directions]

Firefox Logo () – rob64rock has a stylish script that will do this as well.

/* Fx branding tab Favicon on New/Blank tabs */

tab .tab-icon-image:not([src]) {
list-style-image: url(“chrome://branding/content/icon16.png”) !important;
}

#urlbar #page-proxy-favicon:not([src]) {
list-style-image: url(“chrome://branding/content/icon16.png”) !important;
}

menuitem[class=”menuitem-iconic bookmark-item menuitem-with-favicon”]:not([src]) {
list-style-image: url(“chrome://branding/content/icon16.png”) !important;
}

Other Logo ()

/*Replaces the ‘new’ default Favicon */

tab .tab-icon-image:not([src]) {
list-style-image: url(“chrome://global/skin/icons/folder-item.png”) !important;
}

#urlbar #page-proxy-favicon:not([src]) {
list-style-image: url(“chrome://global/skin/icons/folder-item.png”) !important;
}

menuitem[class=”menuitem-iconic bookmark-item menuitem-with-favicon”]:not([src]) {
list-style-image: url(“chrome://global/skin/icons/folder-item.png”) !important;
}

b .tab-icon-image:not([src]) {
   list-style-image: url("chrome://branding/content/icon16.png") !important;
}

#urlbar #page-proxy-favicon:not([src]) {
   list-style-image: url("chrome://branding/content/icon16.png") !important;
}

menuitem[class="menuitem-iconic bookmark-item menuitem-with-favicon"]:not([src]) {
   list-style-image: url("chrome://branding/content/icon16.png") !important;
}
/* Fx branding tab Favicon on New/Blank tabs */

tab .tab-icon-image:not([src]) {
   list-style-image: url("chrome://branding/content/icon16.png") !important;
}

#urlbar #page-proxy-favicon:not([src]) {
   list-style-image: url("chrome://branding/content/icon16.png") !important;
}

menuitem[class="menuitem-iconic bookmark-item menuitem-with-favicon"]:not([src]) {
   list-style-image: url("chrome://branding/content/icon16.png") !important;
}

5 Comments on Replace Firefox Default Favicon

  1. Transcontinental | November 15, 2011 at 11:54 AM |

    Now that’s nice one, thanks a lot The Guru. The new default favicon was getting on my nerves, and would have gotten on my health if my Fx theme had been dark … 🙂

  2. Thanks, this is nice. I guess, though, there is no way to replace the dashed squares in front of bookmarks. (I would have preferred no change to one that comes across as though somebody forgot to finish what they were doing.)

    • Bad_Attitude | November 22, 2011 at 9:05 AM |

      If you have a bunch of bookmarks that haven’t updated the favicons I would give CheckPlaces a try. This add-on does a good job of updating the favicons and also vacuuming the places.sqlite file. Comes in handy when you do a sync and need to update some of the favicons. Most of the time I leave disabled and re-enable it when I need to use it.

  3. Even better. Just a transparent icon (no icon):

    tab .tab-icon-image:not([src]) {
    list-style-image: url(“chrome://global/skin/10pct_transparent_grey.png”) !important;
    }

    #urlbar #page-proxy-favicon:not([src]) {
    list-style-image: url(“chrome://global/skin/10pct_transparent_grey.png”) !important;
    }

    menuitem[class=”menuitem-iconic bookmark-item menuitem-with-favicon”]:not([src]) {
    list-style-image: url(“chrome://global/skin/10pct_transparent_grey.png”) !important;
    }

  4. even better would be no icon and no extra space to the left (when no original favicon is present)

1 Trackbacks & Pingbacks

  1. More Default Favicon Choices | Firefox Extension Guru's Blog

Comments are closed.