Home » Questions » Computers [ Ask a new question ]

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

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

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?

Asked by: Guest | Views: 373
Total answers/comments: 4
Guest [Entry]

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

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

"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."
Guest [Entry]

"Export bookmarks as HTML.
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>

Import bookmarks from edited HTML.

Works in Firefox as of now."