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.