Sunday, April 8, 2012

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

2 comments:

  1. This related question might help:
    How to have favicon / icon set when bookmarklet dragged to toolbar?

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

    ReplyDelete
  2. 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