Restore Firefox’s original blank icon

It may be only me, but I think the new blank icon in Firefox is just hideous. I’m talking about the tab icon you get when a web page lacks a favicon. It is as hollow as it can be and just breaks all the clean looks, specially because it is the same icon in the site button, the bookmarks menu and sidebar.

Firefox with new default blank icon screenshot

Fortunately, Firefox is also as customizable as it gets, so a quick search in userstyles.org returned this small script you can add to your userChrome.css file, located in your profile folder(*):

/* Restore blank document default favicon on New/Blank tabs and Bookmarks */

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

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

toolbarbutton[class="bookmark-item"][scheme="http"]:not([src]), toolbarbutton[class="bookmark-item"][scheme="about"]:not([src]) {
list-style-image: url(“chrome://global/skin/icons/folder-item.png”)!important;
-moz-image-region: rect(0px, 16px, 16px, 0px)!important;
}

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

.sidebar-placesTreechildren::-moz-tree-image(leaf) {
list-style-image: url(“chrome://global/skin/icons/folder-item.png”)!important;
-moz-image-region: rect(0px, 16px, 16px, 0px)!important;
}

Here are the results:

Firefox with old default blank icon screenshot

For easier styling, try the Stylish extension which makes adding this and any other user style in userstyles.org a one click task.

(*): * To open your profile folder, go to about:support and push the Open Containing Folder button. If userChrome.css is not present, just copy or rename userChrome-example.css and add the lines.


Tagged:

3 Comments

  1. JDP November 17, 2011 12:37 pm 

    Be careful when you copy-paste this piece of CSS code, the straight quotation marks have been transformed in typographic quotation marks by WordPress.

    Only straight quotation marks are valid.

  2. Ferdinand November 18, 2011 2:28 pm 

    The white page icon all ways irritated me because it shouts to me that something is missing. The dotted square is a subdued reminder but just looks like another part of the interface as it should.

Comments are closed.