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

Solution 1:

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.

Solution 2:

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.

Solution 3:

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

Solution 4:

Working as of July 2020:

The only reasonable way I found to get a favicon for a javascript: bookmark is by importing it using Import bookmarks from HTML option in the following format (obtained by exporting to HTML):

<!DOCTYPE NETSCAPE-Bookmark-file-1>
<!-- This is an automatically generated file.
     It will be read and overwritten.
     DO NOT EDIT! -->
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<TITLE>Bookmarks</TITLE>
<H1>Bookmarks Menu</H1>

<DL><p>
    <DL><p>
        <DT><A 
        HREF="javascript: (function() { if (window[%22_gainNode%22]) { window[%22_gainNode%22].gain.value = parseFloat(prompt('Set the audio gain')); return; } var v = document.querySelector('video'); var audioCtx = new AudioContext(); var source = audioCtx.createMediaElementSource(v); var gainNode = audioCtx.createGain(); gainNode.gain.value = parseFloat(prompt('Set the audio gain')); source.connect(gainNode); gainNode.connect(audioCtx.destination); window[%22_gainNode%22] = gainNode; } )();" 
        ICON="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAB3UlEQVQ4jb2SS2gTURSGD7oWEQQzBUHUjY/ccrMRtRvxBheiG3dCQV3M+EDrg5koLZ0b0rRWkYIFa9GWENBFRelS0EyDCIbOjG1ScjvqnKBUS0VxozsXx0WZFpPUogsPnM2B7+OH8wP8z/GDGvNna9knz16UT6fS87qUG1eFiGitV8XjbhUnPYXkKaT+oRzppk1GKt0BAAAf4m0b3u8WO7BVtNVY8mgYT57A1uTloP1Cj6dqKgKjvSRvLAos+QiQiWPIxE9kguq3PDpG9XCp8pbOd/XSmWsZMiw5DchEqRmMTJDvzjQIim6Fsndy1H3rLumm/QmQiYVmcJg41AB7CqlQmqab9x9SZnCUDEt+BWRiasUEr1VjgskK9Q3lyR4YJt2S8xDGDxorCcoPxhsErypvqMPup3OdWTJMOQMAAO92Htjlbdt3u7RlD7lb99LU9v3fkImB4NSVvDeLn+slF7v7Fr9gyvGlf09oPONonByNU0Hj96L7yyBY56vQcqvhXCToHRwh3bRJN+XVJYHTwnORYCLGU00LpfCwr8L846fFL7opf5zt7Nm8LIjx55HAaeHpP7VTSrkmdX14/W9HR+P+coLE2Kodr59iLHHS0fh3R+MfC5sSR/5a8K/zC9LelkXBQu43AAAAAElFTkSuQmCC">
        Bookmark name
        </A>
    </DL><p>
</DL>

• Notice that the javascript quotes have to be replaced either with a single quote or %22.
• Icon should be a base64 encoded png image
• Ignore the "DO NOT EDIT" line
• Editing the address / javascript after import will get rid of the icon
• Editing the name / bookmark folder after import will retain the icon
• Bookmark will likely not show up in any folder after import, you will have to search for it either with its name or part of href.
• Save the file as HTML and import it Ctrl+Shift+B>Import and Backup>Import bookmarks from HTML
• Importing the file will not overwrite any existing bookmarks you currently have, however backup is recommended (just in case)

If you import the given example you will get a volume gain management on videos in any tab using AudioContext. It has a loudspeaker icon and "Bookmark Name" as its name.