Custom Bookmark Icon in Firefox (Ubuntu) Bookmarks Toolbar

Custom Bookmark Icon in Firefox.md

Firefox Config

• Open about:config and change

• toolkit.legacyUserProfileCustomizations.stylesheets to true.

New Bookmark

• Open Firefox and create your bookmark, then close Firefox.

Firefox profile

• Open Firefox profile folder and create chrome folder,

• paste inside your custom png/jpg/svg image (min 16x16 pixels).

• In chrome folder convert your custom image into base64:

• base64 -w0 IMAGE.png > ENCODED_IMAGE.txt .

• Create userChrome.css file and paste code below:

userChrome.css

/* Create custom bookmark icon by label. 
** replace "CUSTOM_NAME" with chosen bookmark name */
.bookmark-item[label="CUSTOM_NAME"] .toolbarbutton-icon {
  display: none;
}

.bookmark-item[label="CUSTOM_NAME"]::before {
  /* copy content in base64 .txt and replace IMAGE_BASE_64_ENCODED_TEXT with your encoded text */
  background-image: url(data:png;base64,IMAGE_BASE_64_ENCODED_TEXT);
  background-size: 16px 16px;
  background-repeat: no-repeat;
  box-sizing: border-box;
  content: ' ';
  display: flex;
  height: 16px;
  width: 16px;
  margin-inline-end: 4px;
}

Credit goes to Dan Herbert.