Cannot change favicon provided by website
I can add favicons to any bookmark on the bookmark toolbar using UserChrome.css (Firefox 52.7.3 ESR 64bit on OSX) if the origin web site does not provide a favicon. This works:
/* Bookmark icon */ .bookmark-item[label="FEP"] {
list-style-image: url('/Users/mylogin/Pictures/Favicons/b.png') !important;
}
But this method fails if the origin website provides a favicon, (e.g. youtube) .. The following line does not work, I cannot modify youtube's favicon, this does not work:
/* Bookmark icon */ .bookmark-item[label="YouTube"] {
list-style-image: url('/Users/mylogin/Pictures/Favicons/y.png') !important;
}
How can I edit default favicon provided by the web site? How can I use my own icon using userChrome.css and overwrite the favicon provided by the origin web site?
This is needed because I have 20 bookmarks on my toolbar from wiki, they all get the same favicon provided by wiki...
Thank you for all the help, - y.
All Replies (5)
What does your full userChrome.css look like?
Here we go:
/* Do not remove the @namespace line below -- it's required for correct functioning */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */
/* Remove Names */
#PlacesToolbarItems > .bookmark-item > .toolbarbutton-text { display:none !important; }
/* Recreates the basic functionality of the popular Roomy Bookmarks Toolbar add-on:
Hide bookamrks bar items label text, show on hover. */
.bookmark-item > .toolbarbutton-text { margin-top: 2px !important; }
#PlacesToolbarItems > .bookmark-item:not(:hover):not([open="true"]) > .toolbarbutton-icon[label]:not([label=""]) {
margin-inline-end: 0px !important;
}
.bookmark-item[label="CR"] { list-style: url("/Users/mylogin/Pictures/Favicons/n.png") !important; }
.bookmark-item[label="Expenses"] { list-style: url("/Users/mylogin/Pictures/Favicons/yellowghost.ico") !important; }
.bookmark-item[label="Analytics"] { list-style: url("/Users/mylogin/Pictures/Favicons/fes.ico") !important; }
.bookmark-item[label="FEP"] { list-style-image: url('/Users/mylogin/Pictures/Favicons/b.png') !important; }
.bookmark-item[label="YouTube"] { list-style-image: url('/Users/mylogin/Pictures/Favicons/y.png') !important; }
HI give this a try : https://addons.mozilla.org/en-US/firefox/addon/favicon-customizer/
Please let us know if this solved your issue or if need further assistance.
Pkshadow said
HI give this a try : https://addons.mozilla.org/en-US/firefox/addon/favicon-customizer/ Please let us know if this solved your issue or if need further assistance.
This does not work, are you able to change youtube favicon with this add-on? My settings below did not work:
Hi, I would not know. I do not have the need to change my favicons. Firefox Volunteers try to help with the best information available and that extension says it fits what you need to do. As to if it works that is the Developers issue that you should check out on their support and contact page from the URL provided.
As well since we are Volunteers it is not expected that we know everything but to try to provide you with answers like :
- https://www.howtogeek.com/334716/how-to-customize-firefoxs-user-interface-with-userchrome.css/
- http://techdows.com/2017/09/classic-theme-restorer-userchrome-css-modify-firefox-57-photon-ui.html
- https://github.com/Aris-t2/CustomCSSforFx/issues/1
- https://www.accessfirefox.org/Theme-Font-Size-Changer.php
- https://www.userchrome.org/
- https://www.accessfirefox.org/Firefox_Accessibility_Themes.php
- https://www.userchrome.org/what-is-userchrome-css.html
- http://kb.mozillazine.org/UserChrome.css
- https://github.com/axydavid/FirefoxUI/blob/master/README.md
- https://github.com/wilfredwee/photon-australis
- https://www.reddit.com/r/FirefoxCSS/
Note not all code in one place.
I will set a message for the 1 person who knows CSS well and maybe they can help you if this is a CSS issue.