Based on Wizek's suggestion you can put your code into a data-uri.
data:text/html;charset=utf-8,
<html>
<link rel="shortcut icon" href="https://stackoverflow.com/favicon.ico">
<script type="text/javascript">
alert('It works!')
</script></html>
And save all of that as a bookmark. (Try it! drag the code into your tabs bar)
Unfortunately it only works for certain cases (more below).
How It Works:
(At least in Chrome) It's similar to a bookmarklet using the format javascript: "<html>...your html code here, including a javascript tag that will run when loaded...</html>" like other solutions have suggested. In that case, the html from the page you are on will be replaced by the html from the bookmarklet, but the location remains the same and the bookmarklet itself will still not have a location so Chrome can't save a favicon for it.
In contrast, with a data-uri bookmark we go to the other page, it has it's own location, and the browser can save a favicon for it. Think of it as "Hosting a website in your browser", which you would be able to access in other computers if you sync your bookmarks. You can also use a base64 image for the favicon instead of a url if you want to keep everything local.
It has limitations.
When you click it, it leaves the current page and loads the page in the data. Therefore you won't be able to use it for bookmarlets that interact with the current page, only for code that you can execute in a different page.
Don't use // for comments. Since it will all be saved in one line, wrap them in /**/ and don't forget your semicolons
In FF it saved the favicon, but I was not able to set it to always open popup windows if I want to use window.open() because it doesn't allow me to save a default behaviour for data urls
As an example:
Using this technique I created a small Bookmarklet With Icon Generator. You can drag this code into your URL bar (or save it as a bookmark) to use it. It's a simple page with an input area for code, and for an icon, and then generates a bookmarklet with the icon
data:text/html;charset=utf-8,<html><head>
<title>Bookmarklet With Icon Generator</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<link rel="shortcut icon" href="https://www.freefavicon.com/freefavicons/objects/plain-thumbs-up-152-237293.png">
</head>
<body>
<div class="container">
<div class="page-header">
<h2>Write your javascript and specify a favicon, then drag the button to your bookmarks bar</div>
</h2>
<a id="bookmarkbutton" href='' ondragend='this.click()' draggable="true" class="btn btn-primary btn-lg" role="button">
Drag me to your bookmarks bar! </a><br /><br />
<div>
<label for="fav_href">Favicon:</label>
<input id="fav_href" value='https://stackoverflow.com/favicon.ico' style='width:100%'></input> </div><br />
<div>
<label for='ta'>Write your JavaScript below</label>
<textarea id="ta" style="width:100%;height:50%">
setTimeout(()=>{ &%2313
alert('hello world'); /*Use this format for comments, use %2523 instead of hash (number sign)*/ &%2313
window.history.back(); &%2313
},200);
</textarea></div>
</div>
<script type = "text/javascript">
fav_href.onchange = ta.onchange = function(){
bookmarkbutton.href = 'data:text/html;charset=utf-8,<html><head>'+
'<link rel="shortcut icon" href="'+ fav_href.value +'">'+
'<script type="text/javascript"> '+ ta.value +'<\/script>';
};
ta.onchange();
</script>
</body>
Another Example: Bookmarklet to open Facebook messenger in it's own small window
(might not work if your browser blocks popups by default)
data:text/html;charset=utf-8,
<html>
<link rel="shortcut icon" href="https://facebook.com/images/messengerdotcom/favicon/favicon.ico">
<script type="text/javascript">
url = 'https://www.messenger.com/';
w = 740; h = 700;
x = parseInt( screen.availWidth/2 - w/2 );
y = parseInt( screen.availHeight/2 - h/2 );
nw = window.open(url,'', 'width='+ w +',height='+ h +',top='+ y +',left='+ x);
nw.focus();
setTimeout(()=>{
window.history.back();
window.close();
},200);
</script>
Other Chrome workarounds for getting bookmarklet icons:
