giving a bookmark item an icon

some websites dont have icons when you bookmark them, probably because the site owner didnt bother making one, in any case bookmarks like those will leave you with holes on your toolbar
silly complaint but has someone figured out how to add an icon of your own? I'm trying
.bookmark-item:nth-child(4) {background-image:url("pathname here") ;}
as well as
.bookmark-item:nth-child(4) toolbarbutton-icon {background-image:url("pathname here") ;}
but neither does anything.

maybe someone here knows how to do this normally, through firefox i mean. or through css
if someone knows i'd really appreciate the help. ty


  • image
    153 x 53 - 5K
  • i've found a solution through javascript
    (function() { var link = document.createElement('link'); link.type = 'image/x-icon'; link.rel = 'shortcut icon'; link.href = ''; document.getElementsByTagName('head')[0].appendChild(link); }());
    this will create or replace favicons for any site
    i'm good for now but if there's a css solution that'd be cool too. ty anyway
  • Not sure from your screenshot, but here's an example of how to change icons in the personal bookmark toolbar...
    @namespace url(;
    @-moz-document url(chrome://browser/content/browser.xul) {
      #personal-bookmarks .bookmark-item[label*="userstyles"] {
        list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAADCUlEQVR42l3RYWjUdRzH8ffv97//7fTaOL2c6+66rNi52Q3Uyors5sYokh50I+iBGVFtoqGI+SQIKoiKkGCxedbOFqGWIJqFSiRoNKOU3DVpixZZc9PVJnO33f2v2/1/3x5s3arPw++DFx8+XyUiVFTYsiToQwGgUMpC40Epi3zeQf81y2JLg9aIVqA0f07nKBSLygMQXbGUziNPoBRo5aHSDuMp1XD1skPPB4cpnf+RrbURVtwaxgouQy+9mcffPwCAB8CyLKqX1IACZWw+O9xP/3e9xGrjrF3TzEztOvb29cGFQbY94GP18lvQSi0AGpubvGFKsy7vvPk5T7bu4OVdzWit+SciwtjYGK/v3M5qKZ/nAeWh0hvlwMcneLhpEy0tLWSzWbq7uxkaGiIQCJBMJqmrq8OyLED+Cyhl4/dGOfPlJfZ27QTg3De9nDr9IZFQDd9+MsDAFyepuDNGpTMDYsqIByA7NU3Pe58yMnyNXC4HQNOGZkZGdpDpu0hVZIZVqkSDVWBZOIhBl0toACef48LZk4QCXg4dOogxBp/PR9vzbXR1pTj2VS/JPZ0cmzHcEAGvF+ZHRESovyMsv57ukJ9O7ZGGWFTS6bSUSiX5f0ZHR+WppofkSufbEo9GRETmGogRZnN5/rg2wZpYlFTnLhKJOC9sa2ffvhTj4+MAhEIhIivrsW27XGAOEEMp5/BSx1Hyvhpui8LB1M+8+FwP35/bzdObN2OMAWB0appnUvu5Ojm1MKIYwRSKuAbS6TSZTIaO/R8xOXGJQrGKtvZ2lFI4jsPwxA3u3rSdH959YwEAMMYFBNd1SSQSNDY24rouSim01jiOwyuvvkZs/SPc0/woR9Md/wYEZVlseew+khtbWHv/elbdFae6ejnGGAYGB/n6/EXWtT7LhoYGqjym/MY5QGksv58H743Tf+U6ppghvnKW4eEsx4//Qtaqp3X3Wyxa5KXSI/i0IPOCEhEW+7xye7gagMlsDm0rgkE/CmHiep6i68UfCKKVoJVCI/z+22UKjqP+BndsSOE7UsTgAAAAAElFTkSuQmCC") !important;
    This would find all bookmark items that have the word "userstyles" anywhere in its label, and then replace the icon with the Stylish icon. To pick your own icon, you can use the Stylish editor's "Insert" button to convert any image file on your hard drive into a data URI (the crazy long text string inside the url("") part).

    I like the idea of using javascript to replace the favicon before bookmarking though.
Sign In or Register to comment.