How can I add a favicon to a bookmarklet in Firefox?

Question

Bookmarklets, such as SuperGenPass don't have favicons, because they are javascript: links and Firefox doesn't know where it would obtain the favicon from. Is there any way to add a favicon to a JavaScript bookmarklet?

Answer 1

Pelms' suggestion led me to find the possibly-related Favicon Picker 3, which works better on Mac OS X.

Answer 2

You can try this trick:

1. Find a normal link (without JavaScript) for the website with the correct favicon.

2. Add that link to your bookmarks toolbar as a normal bookmark.

3. Finally, change the properties of the bookmark you just added and change the location to be the actual JavaScript bookmarklet you want (you want the location from the bookmarklet that doesn't have the favicon).

Now you've turned the bookmark from step 2 into a bookmarklet with the desired favicon and JavaScript.

Answer 3

The Favicon Picker 2 extension will let you do this.

How to Use: Just right-click any bookmark and select "Properties,"
then click "Browse..." to select an icon or paste a URL to an icon.

Also, you can uninstall the extension when you're done and the icons will remain.

Answer 4

You can do this with userChrome.css:

1. Go to about:support
2. Under "Application Basics", "Profile Folder", click "Open Folder"
3. If they don't exist, create folder chrome, then file userChrome.css

I use this style:

:root {
  --amber: #FFC000;
  --chartreuse: #B2D733;
  --magenta: #BF1449;
  --teal: #158466;
  --vermilion: #FF4000;
}
#PlacesToolbarItems image {
  padding-top: 16px;
}
#PlacesToolbarItems toolbarbutton:nth-child(5n+1) image {
  background: var(--teal);
}
#PlacesToolbarItems toolbarbutton:nth-child(5n+2) image {
  background: var(--chartreuse);
}
#PlacesToolbarItems toolbarbutton:nth-child(5n+3) image {
  background: var(--amber);
}
#PlacesToolbarItems toolbarbutton:nth-child(5n+4) image {
  background: var(--vermilion);
}
#PlacesToolbarItems toolbarbutton:nth-child(5n+5) image {
  background: var(--magenta);
}

If you want to use images, you can; just put them in same folder, then link like this:

background: url("something.png");

Answer 5

The easiest way is to hijack a bookmark. Just bookmark a page that has a favicon that you want to use. You may need to click on the bookmark to have it load the favicon from the site that it links to. Once you have the favicon, then, go to the bookmark, right click, and choose properties. You can then change the "location" to the javascript code for the bookmarklet you want to have associated with the favicon. Tip: To differentiate a bookmarklet from a bookmark, I change the "name" in the properties tab to whatever preceeded by M:, so for example, if the bookmarklet was for creating a shortened URL using goo.gl, I would name that "M:Goo.gl"

Answer 6

1. Export bookmarks as HTML.

2. Edit HTML, add ICON="data:image/png;base64,..." to your bookmarklet, i.e.

   <DT><A HREF="javascript:(function(){ ... })();" ICON="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAgMAAABinRfyAAAABGdBTUEAALGPC/xhBQAAAAxQTFRFAQMAXV9chIaDx8nGZHRYHgAAADhJREFUCNdjYAAD8QkMDFz//zcw8P//f4CBNTTUgYHbZvMB3AS7TfEBBq5VqxpAxAQGztCwALBBALHhF442ZwQdAAAAAElFTkSuQmCC"></A>
   

3. Import bookmarks from edited HTML.

Works in Firefox as of now.