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 g

Answer 1

Based on Wizek's suggestion you can put your code into a data-uri.

data:text/html;charset=utf-8,

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: "...your html code here, including a javascript tag that will run when loaded..." 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,
    
    
    
    
    


    

        

            
Write your javascript  and specify a favicon, then drag the button to your bookmarks bar
                
         
            Drag me to your bookmarks bar! 


        
 
            Favicon:
             


        

            Write your JavaScript below
            setTimeout(()=>{            &%2313
    alert('hello world');   /*Use this format for comments, use %2523 instead of hash (number sign)*/ &%2313
    window.history.back();  &%2313
},200);
            
  
    

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,

    
    

---

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.