Skip to main content

Adding favicon to javascript Bookmarklet (uses window.open)



I have a bookmarklet that launches a window.open javascript function to open a small window with my bookmarklet -- an external feature used to communicate between any visted site and my server. I'd like for a favicon to show up when the bookmarklet is added to the bookmark toolbar. I realize that the bookmarklet is javascript, there is no domain tied to it so it's going to be either difficult or impossible to achieve this goal.





My understanding of the problem:





Favicons are easy to understand, a link within the head of an HTML doc. The browser can pull this when bookmarking an actual site by reference. However, as you see my bookmarklet is ran off a javascript launch code where there exists no HTML, therefor no link to a favicon . I'm not ready to give up yet though, I feel that there's some injection that can be made...





As of now, the bookmarklet launch code looks like this:





Current Script -- bookmarklet, no favicon (note all code is formated with line breaks -- won't work in all browsers, normally its one line)







javascript:void(window.open(

'http://mydomain.com/bookmarklet/form?u='

+encodeURIComponent(location.href)+

't='+encodeURIComponent(document.title),

'test','status=0,toolbar=0,location=0,menubar=0,

resizable=false,scrollbars=false,height=379,width=379'

));










The closest thing I've found to a solution is as follows, but it doesn't open a new window -- just creates a new tab with the html as the page:





Working favicon, no bookmarklet window







javascript:'<!DOCTYPE html>

<html><head>

<title>Hello World</title>

<link rel="icon" type="image/png" href="http://www.tapper-ware.net/devel/js/JS.Bookmarklets/icons/next.png" />

</head>

<body>Hello World</body>

</html>';










I have tried a combination of the two but it didn't seem to use the icon. I'd be curious to know if anyone can see a type of workaround.. I think it could be possible, I just don't think it's set up correctly as I've been trying.





My hybrid of the two -- bookmarklet but no favicon







javascript:'<!DOCTYPE html>

<html><head>

<title>Hello World</title>

<link rel="icon" type="image/png" href="http://www.tapper-ware.net/devel/js/JS.Bookmarklets/icons/next.png" />

</head><body>Hello World</body></html>';

window.open('http://mydomain.com/bookmarklet/form?u='

+encodeURIComponent(location.href)+

'&t='+encodeURIComponent(document.title),

'test',

'status=0,toolbar=0,location=0,menubar=0,resizable=false,

scrollbars=false,height=379,width=379').void(0);







What I did was use the html structure before firing window.open(), this successfully opened my bookmarklet in a new window, but no favicon showed up for the bookmark icon.








Logical Solution:





My thoughts on this would be to have the bookmarklet point to a page that is simply an HTML file with a favicon link and the launch script in the <head> . However, I don't want this opening in a new tab with a blank HTML file that then launches a popup.. Workaround..?








There exists a similar question but I did not seem to find the answer I'm looking for:





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





Source for the working javascript favicon (no bookmarklet however):





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





I'd be interested in what your current knowledge/thoughts on this would be



Source: Tips4all

Comments

  1. This might not be the solution you want, especially if you don't use Firefox, but I use an add-on called Bookmark Favicon Changer to set the icon's on my bookmarklets and it works great.

    ReplyDelete

Post a Comment

Popular posts from this blog

[韓日関係] 首相含む大幅な内閣改造の可能性…早ければ来月10日ごろ=韓国

div not scrolling properly with slimScroll plugin

I am using the slimScroll plugin for jQuery by Piotr Rochala Which is a great plugin for nice scrollbars on most browsers but I am stuck because I am using it for a chat box and whenever the user appends new text to the boxit does scroll using the .scrollTop() method however the plugin's scrollbar doesnt scroll with it and when the user wants to look though the chat history it will start scrolling from near the top. I have made a quick demo of my situation http://jsfiddle.net/DY9CT/2/ Does anyone know how to solve this problem?

Why does this javascript based printing cause Safari to refresh the page?

The page I am working on has a javascript function executed to print parts of the page. For some reason, printing in Safari, causes the window to somehow update. I say somehow, because it does not really refresh as in reload the page, but rather it starts the "rendering" of the page from start, i.e. scroll to top, flash animations start from 0, and so forth. The effect is reproduced by this fiddle: http://jsfiddle.net/fYmnB/ Clicking the print button and finishing or cancelling a print in Safari causes the screen to "go white" for a sec, which in my real website manifests itself as something "like" a reload. While running print button with, let's say, Firefox, just opens and closes the print dialogue without affecting the fiddle page in any way. Is there something with my way of calling the browsers print method that causes this, or how can it be explained - and preferably, avoided? P.S.: On my real site the same occurs with Chrome. In the ex