How to have favicon / icon set when bookmarklet dragged to toolbar?

I've made myself a bookmarklet, and it functions just fine, but when added to a toolbar in Opera or Firefox, it just takes on the default bookmark icon for the browser (a globe and a star, respectively). My site has a favicon, and the window, tab and even [site] bookmark uses the favicon I've specified. Just not my bookmarklet.

How can I code my site or bookmarklet so that the bookmarklet gets the favicon, too?

I'm aware of various manual hackery techniques users can use to set the favicon after the fact, but those are undesirable solutions.

Here is how you can do this:

1. Drag you bookmarklet to Bookmarks Bar.
2. Next to it create a bookmark of a site which favicon you want to use for your bookmarklet.
3. Open Bookmarks Manager, click Organize dropdown, and select Export, save your bookmarks as html file.
4. Open that html file in text editor.
5. Find the bookmark you just created, lets say its Gmail bookmark, you should have an html code for it, that looks like this:

<DT><A HREF="http://mail.google.com/mail/u/0/#inbox" ICON="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABV0lEQVQ4jdWQzUoCYRiFnxl/0plso0IKX7mqXWCLIlq0qEW4d19Qi6BLCELwEgpvQbyAVrroCrSNUJFGAyrkEEEMNs5PCxtRHGsZneX7nedwzgd/LQngObfnykIQOj9Disd/BFxdZ3hVwtE0Mje3kuw9OJqGWSji1BtzYafeGHk0jTdzCIA8aXANA/O6hFWuzMBWuYJ5XcI1DF6MAY8fxmxAYHdnZK7WMAtFXF3H1XXMQhGrWsN2XR5WM/QGn2MmOBkQOj5CFoJhuTKe5DUzbJvW1jbWZhbqd/4BAIGDfSQhGH7XBehLMlruEGlFzEyTZy6AvL5G+PICWQja6iJaPu8L+zbw9B4MYpyeEB4MkF7782z+AZ1OD0WNkk4vA7AUi/HUav8eYNsOnW6XZCJBJLIwvieTcVQ1SrN5j2XbUwFTf9DpdkmnUlOwJ0VRyGY3UBVl7px/qi+cdYQvZvKCUwAAAABJRU5ErkJggg==">Gmail</A>

6. Copy the entire ICON tag
7. In the same file find the bookmarklet you created, and insert the ICON tag you copied into your bookmarklet tag:

<DT><A HREF="javascript:(function(){... bookmarklet JS code...})();" ICON="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABV0lEQVQ4jdWQzUoCYRiFnxl/0plso0IKX7mqXWCLIlq0qEW4d19Qi6BLCELwEgpvQbyAVrroCrSNUJFGAyrkEEEMNs5PCxtRHGsZneX7nedwzgd/LQngObfnykIQOj9Disd/BFxdZ3hVwtE0Mje3kuw9OJqGWSji1BtzYafeGHk0jTdzCIA8aXANA/O6hFWuzMBWuYJ5XcI1DF6MAY8fxmxAYHdnZK7WMAtFXF3H1XXMQhGrWsN2XR5WM/QGn2MmOBkQOj5CFoJhuTKe5DUzbJvW1jbWZhbqd/4BAIGDfSQhGH7XBehLMlruEGlFzEyTZy6AvL5G+PICWQja6iJaPu8L+zbw9B4MYpyeEB4MkF7782z+AZ1OD0WNkk4vA7AUi/HUav8eYNsOnW6XZCJBJLIwvieTcVQ1SrN5j2XbUwFTf9DpdkmnUlOwJ0VRyGY3UBVl7px/qi+cdYQvZvKCUwAAAABJRU5ErkJggg==">MyBookmarklet</A>

8. Save this file
9. Return to Chrom Bookmarks Manager, click again Organize, and select Import
10. Import HTML file you just edited, your bookmarklet now has a favicon.

Basically the procedure is to get ICON attribute of a bookmark tag and insert it into bookmarklet tag

A bookmarklet uses the javascript:// schema and thus do not have a domain from which a favicon may be loaded.

So, currently there is no way for you to provide a favicon for a bookmarklet. Think about it like this: remember the whole Javascript sandbox thing - where Javascript may not access anything outside the domain of the web page where it is running? Well a bookmarklet that needs to be tied in to whatever domain for the current page you are watching, cannot be also tied in to a favicon on your own web site.

Update: According to Hans Schmucker's answer, there is a possibility to create a bookmarklet that when loaded by the browser into the bookmark menu it will generate an HTML document that has a favicon. The reasoning seems like it may work but I have yet to see something like this in action and my tests have came back negative.

That's not quite right: A bookmarklet has no domain, but it has a location (which is the bookmarklet itself) and you can assign an icon to that. After that it's a matter of how the browser saves icons (Firefox saves a bookmark's icon permanently, you may not be so lucky with other browsers).

P.S. Security doesn't even play into it, icons can come from anywhere. There is no restriction.

See http://www.tapper-ware.net/blog/?p=97

After reading the tapper[ware] and Restafarian site, here's the simplest solution I could come up with:

<a href="javascript:

var title = window.location.href;

if (title.indexOf('http://yourwebsite/bookmarklet/') == 0) {
	'<head><link rel=\'shortcut icon\' href=\'favicon.ico\'></head>Bookmarklet';
} else {
	(function(){document.body.appendChild(document.createElement('script')).src='http://yourwebsite/bookmarklet.js';})();
}">Click Me!</a>

Works great in Chrome and FF, but FF4 is the only browser that will save the icon in the bookmarks bar. Here's what it looks like: http://cl.ly/5WNR

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:

• Exporting the bookmarks bar, editing it, and Importing it again, as described in this answer https://superuser.com/questions/212722/how-can-i-add-a-favicon-to-a-bookmarklet-in-google-chrome

• Turning the bookmarklet into an extension. It won't be a bookmarklet anymore, but it will have the same function. Here's a simple website that does it for you http://sandbox.self.li/bookmarklet-to-extension/ then just change the icon file to what you want. The drawback of this is that extensions use up ram (around 10mb for simple ones?), if you have a lot and little ram it might not be the solution for you. Also, you won't have text like in a bookmark, only the icon.

Heres a nice technique that almost does what you want.

Works great on my Mac✅, but I couldn't get it to work on Windows 7⃣.❌

Use "Emoji". They are Unicode characters, that happen to also look like colorful icons. You only get to choose from a predefined list of images, but actually its not bad if all you are trying to do is give the user something to look at to remind them of what the bookmarklet does.

For example, I'm making some "security key" bookmarklet. So I use  in my bookmarklet name! 

So basically you see the image in the bookmarks bar 

Use this site to help you find an Emoji that works for your bookmarklet: http://emojipedia.org/symbols/

It's possible to assign and modify favicon the favicon using javascript and canvas (see the amazing favicon game Defender of the Favicon). The source code of the game will help you do that (it basically rely on use of toDataUrl() function on canvas as seen on line 554 of the source).

// set favicon
if( !stupidBrowser && useIcon )
{
     var	icon=$('favicon');
     (newIcon = icon.cloneNode(true)).setAttribute('href',ctx.canvas.toDataURL());
     icon.parentNode.replaceChild(newIcon,icon);
}

What happens when a bookmarlet setting the favicon this way is clicked or saved ? I don't know but it could be nice to give it a try. Browser may save it ?

I think that a possible way is using unicode char in bookmarklet anchor like your icon:

http://unicode-table.com/en/#cyrillic

sifting through all the possible symbols you might find the character that resembles more to the icon you want to

So, this is not a full solution yet, but may be a step to a working direction.

data: encoding of an icon in a data:-uri encoded html works, to my surprise.

data:text/html;charset=utf-8, <title>Separator Tab</title><link rel="shortcut icon" href="data:image/png;base64,AAABAAEAEBAAAAEAIAAoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP8AAAD/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/AAAA/5aWlv8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/wAAAP+Wlpb/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP8AAAD/lpaW/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/AAAA/5aWlv8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/wAAAP+Wlpb/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP8AAAD/lpaW/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/AAAA/5aWlv8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/wAAAP+Wlpb/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP8AAAD/lpaW/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/AAAA/5aWlv8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/wAAAP+Wlpb/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP8AAAD/lpaW/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/5aWlv8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACWlpb/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" /> Separator Tab

Since this is <html>, we can run <script type="javascript"> in there too.

For some bookmarklets this may already be more than enough. For others that'd like to modify the current page or at least get some info from it before opening a new tab, tough luck yet. I'll update this answer if I find a way to do that.