Notice: To Install styles, click the "Show Css Code" button first. The install button will work after that.
The devs are no longer actively involved in the forum, so any bug reports regarding the extension or website should be sent to them directly at contact@userstyles.org.

Google's new fav

edited January 2009 in userstyles.org
Is it possible to change the damn thing with css? or hide it, just for google tabs?
TIA!

Comments

  • edited January 2009
    Try using this to display none:

    .tab-icon-image[src="http://www.google.com/favicon.ico"] {
    display:none!important;
    }

    If you are auto hidding your favicons and displaying them on hover, use this to not show the google favicon:

    .tabbrowser-tab:hover .tab-icon-image:not([src="http://www.google.com/favicon.ico"]) {
    display: -moz-box !important;
    }

    To replace it, add the data image of your choice (this is the original google icon):

    .tab-icon-image[src="http://www.google.com/favicon.ico"] {
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAB3RJTUUH2QELCy0K3y4V5gAAAAd0RVh0QXV0aG9yAKmuzEgAAAAMdEVYdERlc2NyaXB0aW9uABMJISMAAAAKdEVYdENvcHlyaWdodACsD8w6AAAADnRFWHRDcmVhdGlvbiB0aW1lADX3DwkAAAAJdEVYdFNvZnR3YXJlAF1w/zoAAAALdEVYdERpc2NsYWltZXIAt8C0jwAAAAh0RVh0V2FybmluZwDAG+aHAAAAB3RFWHRTb3VyY2UA9f+D6wAAAAh0RVh0Q29tbWVudAD2zJa/AAAABnRFWHRUaXRsZQCo7tInAAAC7UlEQVQokQXBS2gUZxwA8P9+8827+8qO8REfiYKYikHFahuiIjb4AG0vUm01vfRgDyqCgqAoKFbwAT0IFUHRQz1UpIj0QVs8JBpblchW05qAJjPZNZns7szs7M7MzvPv75f6ZP/2bTs/szx0/JglhKCvZJmKXlI6FrzRyu0dS1q2PZdi3jfz7nQ6dmk2t2D3518kROZ5TgRAAN/T28XcyETxmz1rVc8UGdLJ8dQpZah/cNsm6jZ5lsl/wEEtANNOHv72szb+4uk/j2zPSXHC8lVr+zdt2bVxw4o5C0F7JVIFegeOaYiPTCxGuPfkD8qarSPqdBOxjjhqGsPTRmH1x4tXrmlWdZwsHtq8gnJiW7UFuRx8f+X+6Mv/xkb+ojGErhul4oIozcvxg38+bFV0OasABBhRGiToh/DTvedDQ0Nnjh/zXJgrQUxiXuACYHU3WKSIIHda5VJORkSgYRwQCoQmhql/2rcYW0AhpMQD9KMQeUZkgON5YNpksGZYJiGCJNpNKBb/Xda1tNaAjACh6wBl/EZD4ngGkyTBJIwwCCCTicOEtJyoaw5ok+V35dlCGio1nxVk8BOOkQDYtJBhSIplKcRcPKnLUo5YhhMCfLSuVxvTvAAKBT7wUsDmU2LBrPmj/5fGX1cqM0GjHjFd3Zbhk+5lK5t1CFz4sGf95YsPStPA8dR3qOdQvRofPnp2x86v9n357d27vydvqml5HlHfjilZOHeqX1XVB7/8Wm9ARMDyghCgY2nh1o/XHz/7o6zPtintpGtRFEVEyYPdBNOG4b9venF949beqzfu8TkuFsDwgEmDOmOr7yYYEcEx7aZOObYm8CCxYLRg8Mmd86cvnP7uxO07V90ooFI2TEmOZR88MrB733aoTixckoHNB/o1tF6Glob4GoMyxga6alCaQuN5fXIKcTx2DXQwmcWpoa97ONrX13PtxqWIppMUG3q+79bbM6LrNVhRRF5uOLFAGMn3aEXdMF/O5tn3W9SLDS8H5RgAAAAASUVORK5CYII=)no-repeat!important;
    padding-left:16px!important;
    width:0!important;
    }

    To replace any favicon, use DOM Inspector to find src nodeValue and use above code and insert any image data you like.
  • edited January 2009
    Perfect! Thanks a LOT, really :-)
    If you don't mind, i'll publish my style fully credited to you, of course!
  • No problem, glad I could help.
  • edited January 2009
    makondo,

    If you want to change all Google site favicons to yours in one statement, you can use [src*="google.com"]
  • Oh, thanks again! That will certainly help, appreciate it!
  • edited January 2009
    Also adding this to your code, or create another style, will put your icon in the Bookmarks Toolbar and URLbar as well:
    .toolbarbutton-icon[src*="google.com"], #page-proxy-favicon[src*="google.com"]

    For Searchbar:
    #Google .menuitem-iconic-icon, .searchbar-engine-image[src*="%2FgowAP"]
  • edited January 2009
    Fantastic! Another load of thanks! Would you rather just re-publish those styles under your name, i'll mark mine obsolete? You can have the images, it's a thank you gift ;-)
  • Its your idea for the style, go ahead and continue your work. I need not recognition other than a Thank You. I am just glad I can help contribute to developers and users looking for a better browsing experience. Keep up your good work.
  • Thanks again!
  • srazzano,

    Your global fix if fantastic! Seems to work as advertised, but it doesn't seem to have any effect on the favicon displayed in the forward/back history, or in the history displayed in the Library. According to something I ran across, Firefox may not actually read the stored favicon, but rather it imports the history icons directly from the target website. If that's true -- and the behavior seems to indicate it is -- then I'm hoping that it will still be possible to override the behavior with a userchrome style.

    Got any thoughts on that?
  • i don't know of a way to change icons in trees (so no library/sidebar)
    /*google cache tab icon (rightclick on page and goto view page info>general>address to add more ips)*/ .tab-icon-image[src="http://74.125.95.132/favicon.ico"], /*back/forward menu/history/undo close tab*/ menuitem[style*="http://www.google.com/favicon.ico"] .menu-iconic-icon, menuitem[image*="http://www.google.com/favicon.ico"] .menu-iconic-icon,
    also a smaller png to use
    data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAABeElEQVR4XpWSy0sCURTGW5WmGIESYkktjECRCi16IEEE7opAaNE/0MYWrVrVIqKFRJaE5CMDCyPMRYqSRosSKaF0UQRRFGnYpEmjjlecudO4UWeQ0I/D3Zz7O3zn0dQ9fzvq7q0/SgBJVwEnkij4TOUSaSwHitWpMJ9HA3zBjHrhnqf0sRWeVoWHegVDx3rHy1UEJQjIBA79qFDlWN0KxROgXOLMn+xRW1mSZSSVpQGBm1/+mHNl87z0my7kJ49mMaalJcNXu9JI/qsKQLmTawId47v1AoUi7NO4RROGBgCu4lQ4vF+3JUh2TQfYMksmR+sYJ8jrB3AZxUJPBW84DSGsNK3dfueO7G2YQtXAcwyTztgEKiNLatWuu2hTin/nOf1HVJhdjwwb8RTRLNbpzF7m4oIRpG3Qzhlw6E9iOUCUgbtXvEWsWzO4apxGGgU2Z3Ru8YIrP2BJ7KJJc+eURTZr3zH53j4QGsAQASEGQBHHa0ypodumgD9fhC3T7VaqXwAAAABJRU5ErkJggg==
  • edited January 2009
    This will also get the urlbar dropdown history list:
    .ac-site-icon[src*="google.com"]

    The back/forward dropdown list and the sidebar favicons I believe can not be done with css and would require altering files within the browser itself and then you would lose them with browser updates.

    I suppose in short, this will get everything except for back/forward and sidebar:
    [src*="google.com"], .searchbar-engine-image[src*="%2FgowAP"], #Google .menuitem-iconic-icon

    Or to keep Gmail icon.
    [src*="google.com"]:not([src*="mail"]), .searchbar-engine-image[src*="%2FgowAP"], #Google .menuitem-iconic-icon
  • that one i posted changes the back/forward drop menu (for me at least ff3.05 xp x64)
  • By combining both srazzano and ChoGGi's suggestions, everything except for the Library History is now styled with the original icon.

    Thanks!
  • By the judicious application of some wildcards you can whack all the
    non mail src=*google.com*/favicon.ico everywhere but treechildren
    I also included the original ico file here in case you want a bigger blob
    Works on FF 3.0.5, XPPro32                                                                 =)
    *[src*="google.com"]:not([src*="mail"])[src$="favicon.ico"] { background-image: url(data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABmJLR0T///////8JWPfcAAAACXBIWXMAAABIAAAASABGyWs+AAAERUlEQVRIx71VSWgUWxQ9XZXu6sGkNYNR0zhERJQoYogJiAOCbowous1OXLoJ2QoqunMh6iYgKIiI4EZdKBIcCCq2REMSnOh0CHFIT+lOqqu6hnSdv7hUhk82H+HfzXv16t73zjv3nvsCmnb27PQ02dFx+nRPD/5/8wGYpuPkclww1zWMSoX0PHJqiszlZO668v/nT9MkycnJiYl8npybk/VSqVSyLNK2q1VZET/ScSyLJGdnbZtMpTZsAMgaH4iiBIONjYBty7dpRqPhMJDJ6HoiATx48OhRNgukUsnku3dAMjkyoiiAaVpWUxOQzdbU5HLArl07d2oacPBgd3dnJ3Dq1N69gQDQ0bFli6oCsZjn6foKDHgeaVlkoSCY37wxDJI8dqyvL5kkGxra21+8IMfHhadMRu41Py/j9LSMHz58/UqSiURX17Vr5I4de/b09ZEzMzMz4qHr5CIDywBMTQkIkjx37urVb9/IrVs7Ovr7yWzWtslFP8fxvGJRIFSrpGX5lAukoaFUStfJZHJkZGyMrFT8o21b11cAYBiS3UuX+vsnJsjm5v37b94kR0e/f7dt2YAUgL9/k6WSrFkWOTkp89lZ0vd0XcdZCsgw5H+1KuytUAM1NQAwMxMIRKNAMFittrYCbW2JRCgEANWq6wKkqtbVAZrmupoGzM4Ggxs3AoGA7BMOV6uGIbNYDCABwwAUBZifBxTFdRsaFktgAUClAnge8PTp2NjwMAC0ts7PA54XjWazgKJ4XjwOBAKuG4sJIACIxxVlua4CgVAIUFXPAwDPUxRFEW+JIMlF74VgUlDW1BQK9fUAUCzKmm2vWQMAuu55ABkMGgag68GgHOG6Eq+qoqBwWOApCilAIhEgEpEzADKdXoEBoRlIJBoaVq8GXr58//7jR8C2VdVxAE2rrY1EANuem1MUoLa2rg4ADENVAaBcFgZTqXQ6lwNCoXh87VpJSSgEWFY+H4kA7e1tbUv5WmBAUYB8Hujq2rdP7qSq27cDV67cujU6ChSLimLbgKLIwZJRIBqV9P348flzOAycP9/T8+kTcPz44cOPHwNnznR3P3sGDAwMDKTTAOl5/g7L+oBvf/6IEDdv3r377VsyHq+vv3OHHBgQfVcq0g09z48olwuFxWq3bVHT8PCvXyTZ1LRp08WL5L17Dx8ODS3K2FfBshowDKCxUdMmJ4HXr58/7+wE1q9vbMzngZMnDx26fx+4ceP69XQayGQcR3Idi4VCQKmkquUyUC6LmiYmCgXXBXK5cvnLF0mhqONfJeszMD19+3ZzM6BpUlq+FYu27XlAb++FC69eAYODT56MjgK2rWlSnMHgtm2AqtbVOQ5gWbncqlVAPL5uXSYDHD165IhhAJcv9/aeOAG0tEQikQgwPt7SEggsS4E8Jz5Ff2um6TjSG/1m7fdY0zTNJY3If4YPHBgc/MuH9T/Z3bsy/gNrR8UcI5ILnAAAAABJRU5ErkJggg==); padding: 8px; } Real pity about the treechildren

    -z
  • zobier,
    your code works well for me (personally, i don't care about the treechildren). Thanks a bunch!
    Now, would you mind if i use your code in my styles with full credit to you?
  • No worries, no attribution necessary.
    I kind of expect any code published online (without a licence notice) is in the public domain.
  • zobier...
    Your code doesn't work for me using FF 3.0.5 on Ubuntu.
    Any thoughts?
  • Great fix...Just one question, how to get it to work on the search bar for google Canada? I have tried the usual, change .com to .ca, and everything else I can think of to no avail. Any help would be greatly appreciated!! Until then I'm sticking with google.com ...Can't bear looking at that ugly dogs breakfast.
  • edited January 2009
    Did you try my code:

    @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
    [src*="google.com"]:not([src*="mail"]), #Google .menuitem-iconic-icon, .searchbar-engine-image[src*="%2FgowAP"],
    .searchbar-engine-image[src$="%3D%3D"], #searchPopup image, #gtbSearchButton .toolbarbutton-icon,
    menuitem[style*="http://www.google.com/favicon.ico"] .menuitem-iconic-icon {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACt0lEQVR42n1TXUiTYRR+ttn+UNHVaokRejHULVlkRBcGpiJWOiU3RZkmoRdeuEQyBTEcIaLMUQqWV+VPrHRDhBQZWoYIJaKobS0vQhQy/EgRWfN3ne/zh5XmC+8H7/nOeXiec57Dw5GjCwWkZQC/APCE78XEi/R5RW8L0L3in837uzi/kkLG8vLc5eLiK5f8/7S1TcyYza/lgO8p0F5/DEC+NTr6mrK3N/syTjgZGW8mXa5P3wgkxw8gv5KK9QfF/f1zGB7+DqFQAIb5jenpn4iLO4+Wlltcdnq6ddLt/vyWZcLb0yxxut1NCvZnRYUDTieDzs5MhISIuYKxsQUUFjbBaMxFSclVFngzIqL0F+CNIYD7JoPhdmZ19Q213e5CVVUf3O5HR6gvLa1DoQg8fJtMI7NdXX09BGCYt9mqJGr1WblG8wJRUWdgtd49qQ3werdZWYzB0LhOANk7Nttjr0wmkSYkWKDVXkdDQ/KJAAzjIZnLnqKiBhEB6HdaWx96w8KCpFrtc6hUStjt+v8Wr61tYHFxDVNTS57a2lYWIGfeaCyQJCVFytPSyCtwYmCgEZGRoVzB6qoXNTXvMTg4Qa9AdHToOBCaEmOz2TkJpqAgTWZd3U11e/s0xsc7KDEeIyNFIFlcMntTU5+w6mGxPOAYmM1js4CrZ3+MfGdKyh2ZUnla2Nz8gRLH6UYjLy+RayrLwmxuYy2NsjID28DNoaF3NEZfzL6RdGRhqT45OVETHh7MGx1dwNzcV4pv0ZVBIJAiOFiE2Nhz5AG+z+EYmqK9ICN11/tZWWcFApQqVbxKrZYLxeIA8Pk87O76DkdHBtucmfn4BdgmK3f7W/ngZBETGIFQRiS6qCA2UjZKmj0bG/M/gBVaJtAy9Ry3TIdMqCdbpYDgHvXmwl5sdwHYeQmcevbvOv8BpQAHtQM1l0EAAAAASUVORK5CYII=) no-repeat !important;
    padding-left: 16px !important;
    width: 0 !important;
    }

    Will also get Google Toolbar icon. Replace data image with any 16px data image you prefer. If using original Google icon delete from the above code: .searchbar-engine-image[src$="%3D%3D"],
  • edited January 2009
    Great thanks that works...what a relief!! OOps spoke too soon...if I do a search on google.ca the results come up with the new one. Oh well google.com it is!
  • edited January 2009
    * C² *,

    Either edit [src*="google.com"]:not([src*="mail"]) to [src*="google.ca"]:not([src*="mail"])
    and for the back/forward drop down menu list
    menuitem[style*="http://www.google.com/favicon.ico"] .menuitem-iconic-icon to
    menuitem[style*="http://www.google.ca/favicon.ico"] .menuitem-iconic-icon

    or use this for coverage of .com and .ca
    @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
    [src*="google.c"]:not([src*="mail"]), #Google .menuitem-iconic-icon, .searchbar-engine-image[src*="%2FgowAP"],
    .searchbar-engine-image[src$="%3D%3D"], #searchPopup image, #gtbSearchButton .toolbarbutton-icon,
    menuitem[style*="http://www.google.c"] .menuitem-iconic-icon {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACt0lEQVR42n1TXUiTYRR+ttn+UNHVaokRejHULVlkRBcGpiJWOiU3RZkmoRdeuEQyBTEcIaLMUQqWV+VPrHRDhBQZWoYIJaKobS0vQhQy/EgRWfN3ne/zh5XmC+8H7/nOeXiec57Dw5GjCwWkZQC/APCE78XEi/R5RW8L0L3in837uzi/kkLG8vLc5eLiK5f8/7S1TcyYza/lgO8p0F5/DEC+NTr6mrK3N/syTjgZGW8mXa5P3wgkxw8gv5KK9QfF/f1zGB7+DqFQAIb5jenpn4iLO4+Wlltcdnq6ddLt/vyWZcLb0yxxut1NCvZnRYUDTieDzs5MhISIuYKxsQUUFjbBaMxFSclVFngzIqL0F+CNIYD7JoPhdmZ19Q213e5CVVUf3O5HR6gvLa1DoQg8fJtMI7NdXX09BGCYt9mqJGr1WblG8wJRUWdgtd49qQ3werdZWYzB0LhOANk7Nttjr0wmkSYkWKDVXkdDQ/KJAAzjIZnLnqKiBhEB6HdaWx96w8KCpFrtc6hUStjt+v8Wr61tYHFxDVNTS57a2lYWIGfeaCyQJCVFytPSyCtwYmCgEZGRoVzB6qoXNTXvMTg4Qa9AdHToOBCaEmOz2TkJpqAgTWZd3U11e/s0xsc7KDEeIyNFIFlcMntTU5+w6mGxPOAYmM1js4CrZ3+MfGdKyh2ZUnla2Nz8gRLH6UYjLy+RayrLwmxuYy2NsjID28DNoaF3NEZfzL6RdGRhqT45OVETHh7MGx1dwNzcV4pv0ZVBIJAiOFiE2Nhz5AG+z+EYmqK9ICN11/tZWWcFApQqVbxKrZYLxeIA8Pk87O76DkdHBtucmfn4BdgmK3f7W/ngZBETGIFQRiS6qCA2UjZKmj0bG/M/gBVaJtAy9Ry3TIdMqCdbpYDgHvXmwl5sdwHYeQmcevbvOv8BpQAHtQM1l0EAAAAASUVORK5CYII=) no-repeat !important;
    padding-left: 16px !important;
    width: 0 !important;
    }
  • srazzano,
    Thanx so much...using the last code you suggested hit the mark. I am now happily googling on google Canada, and the ugly new favicon has been banished from my screen. WOOHOO!!!
  • Hello,
    I cant' have the favicon from the google search changed. I have a blank favicon.
    Any help.
    I use the last code (from srazzano).
  • My site don't hava a favicon yet. Can I add one?
Sign In or Register to comment.