小书签拖到工具栏时如何设置图标/图标？

我自己做了一个小书签，它的function还不错，但是在Opera或者Firefox中添加到工具栏时，它只是浏览器的默认书签图标（分别是globe和star）。我的网站有一个图标，窗口，标签，甚至[网站]书签使用我指定的图标。只是不是我的小书签。

我如何编码我的网站或小书签，以便小书签也获取图标？

我知道用户可以使用各种手动hackery技术设置图标，但这些都是不理想的解决scheme。

小书签使用javascript://模式，因此没有可以加载favicon的域。

所以，目前你没有办法为bookmarklet提供一个favicon。像这样想一想：记住整个Javascript沙箱的事情 – Javascript可能无法访问运行网页的域之外的任何东西？那么，一个书签，需要绑定到当前页面的任何领域，你正在看，不能绑定到您自己的网站上的图标。

更新：根据Hans Schmucker的回答，有可能创build一个书签，当浏览器加载到书签菜单时，它将生成一个带有图标的HTML文档。理由似乎可能会奏效，但我还没有看到这样的行动，我的testing回来了消极。

这是不正确的：一个书签没有域，但它有一个位置（这是书签本身），你可以指定一个图标。之后，浏览器如何保存图标（Firefox永久保存书签图标，您可能不会对其他浏览器感到如此幸运）。

PS安全甚至不玩，图标可以来自任何地方。没有限制。

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

在阅读了Tapper和Restafarian网站之后，下面是我能想到的最简单的解决scheme：

 <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>

在Chrome和FF中很好用，但是FF4是唯一能够将图标保存在书签栏中的浏览器。下面是它的样子： http : //cl.ly/5WNR

这里是你如何做到这一点：

将书签拖到书签栏。
在它旁边创build一个网站的书签，您可以使用您的小书签。
打开书签pipe理器，单击组织下拉列表，然后select导出，将书签保存为html文件。
在文本编辑器中打开该文件。
find你刚创build的书签，可以说它的Gmail书签，你应该有一个html代码，看起来像这样：

<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>

复制整个ICON标签
在同一个文件中find您创build的书签，然后将您复制的ICON标签插入您的书签标签中：

<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>

保存这个文件
返回到Chrom书签pipe理器，再次单击组织，然后select导入
导入刚刚编辑的HTML文件， 您的书签现在有一个图标 。

基本上这个过程是获得书签标签的ICON属性并将其插入到书签标签中

在这里输入图像说明

这里有一个很好的技巧，几乎可以做你想做的事情

在我的Mac上很好用，但是我无法在Windows 7上运行

使用“表情符号”🈳。他们是Unicode字符，碰巧也看起来像彩色图标。你只能从预定义的图像列表中进行select，但实际上它并不坏，如果你正在试图做的是给用户一些东西来看看比赛，提醒他们书签的function。

例如，我正在制作一些“安全密钥”书签。所以我在我的书签名中使用🔑 😃😊

所以基本上你会看到书签栏中的图像

使用本网站可以帮助您find适用于您的书签的表情符号： http : //emojipedia.org/symbols/

使用javascript和canvas可以分配和修改favicon图标（请参阅令人惊叹的favicon游戏“Favicon的Defender” ）。游戏的源代码将帮助你做到这一点（它基本上依赖于在canvas上使用toDataUrl（）函数，如源554行所示）。

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

点击或保存以这种方式设置图标的bookmarlet会发生什么？我不知道，但它可以很好地尝试。浏览器可以保存吗？

根据Wizek的build议，你可以把你的代码放到一个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>

并将所有这些保存为书签。（ 试试吧，将代码拖到你的标签栏中）

不幸的是，它只适用于某些情况下（更多下面）。

怎么运行的：

（至less在Chrome中）它与使用javascript: "<html>...your html code here, including a javascript tag that will run when loaded...</html>"的书签类似javascript: "<html>...your html code here, including a javascript tag that will run when loaded...</html>"与其他解决scheme一样。在这种情况下，来自您所在页面的html 将被小书签中的html replace ，但位置保持不变 ，小书签本身仍然没有位置，因此Chrome无法为其保存favicon。

相比之下，使用data-uri书签， 我们转到另一个页面 ，它有自己的位置，浏览器可以保存一个favicon。把它想象成“在你的浏览器中托pipe一个网站”，如果你同步你的书签，你可以在其他计算机上访问它。你也可以使用一个base64图像的favicon而不是一个url，如果你想保持一切本地。

它有局限性。

当你点击它时，它会离开当前页面并加载数据中的页面。因此，您将无法将其用于与当前页面交互的bookmarlet，只能用于您可以在不同页面中执行的代码。
不要使用/ /评论。由于它将全部保存在一行中，所以将它们包装在/ ** /中，并且不要忘记你的分号
在FF它保存了图标，但我不能将其设置为总是打开popup窗口，如果我想使用window.open（），因为它不允许我保存数据url的默认行为

举个例子：

使用这种技术，我创build了一个带图标生成器的小书签。您可以将其复制到您的URL栏（或将其保存为书签）以使用它

 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="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 style='background: -webkit-linear-gradient(top, #f4f8f9 0%, #e0f8ff 95%);'> <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! </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(()=>{ &#13 alert('hello world'); /*Use this format for comments*/ &#13 window.history.back(); &#13 },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>

另一个例子： Bookmarklet在它自己的小窗口中打开Facebook信使（如果您的浏览器默认阻止popup窗口，则可能不起作用）

 data:text/html;charset=utf-8, <html> <link rel="shortcut icon" href="https://facebook.comhttp://img.dovov.commessengerdotcom/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>

其他Chrome解决方法获取书签图标：

导出书签栏，对其进行编辑，然后再次导入，如本答案所述https://superuser.com/questions/212722/how-can-i-add-a-favicon-to-a-bookmarklet-in-谷歌浏览器;
将书签变成扩展名。它不会再是一个书签，但它将具有相同的function。这是一个简单的网站，它为你http://sandbox.self.li/bookmarklet-to-extension/然后只是改变图标文件到你想要的。; 这样做的缺点是扩展名使用内存（大约10mb简单的），如果你有很多很小的内存，它可能不是你的解决scheme。此外，您将不会有书签中的文本，只有图标。

我认为，一个可能的方法是像书签一样使用unicode字符。

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

筛选所有可能的符号，您可能会发现类似于您想要的图标的字符

所以，这还不是一个完整的解决scheme，但可能是一个工作方向的一步。

data:一个data:中的图标编码data: -uri编码的html作品，令我惊讶。

 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

既然这是<html> ，我们也可以在那里运行<script type="javascript"> 。

对于一些书签，这可能已经绰绰有余了。对于其他想要修改当前页面的用户，或者在打开新标签之前至less从中获取一些信息，还是很难的。我会更新这个答案，如果我find一个方法来做到这一点。

小书签拖到工具栏时如何设置图标/图标？

使用Javascript更改选定文本的CSS

如何在我的网站上添加“添加到collections夹”button或链接？

configurationAndroid Web应用程序

是否有可能使用URL参数链接到PDF内的书签？

如何导航到Eclipse 3.4.1中的书签？

如何在XCode 4中书签代码？

从JavaScript添加到浏览器collections夹/书签，但对于所有浏览器（我的Chrome不起作用）？

Mercurial分支和书签

execCommand SaveAs在Firefox中工作吗？

在iPhone上的“添加到主屏幕”的JavaScript？