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

Question

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.

Answer 1

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

Answer 2

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.