当书签拖到工具栏时如何设置网站图标/图标?
我为自己制作了一个小书签,它的功能很好,但当添加到 Opera 或 Firefox 的工具栏时,它只是呈现浏览器的默认书签图标(分别为地球仪和星星)。 我的网站有一个网站图标,窗口、选项卡甚至 [网站] 书签都使用我指定的网站图标。 只是不是我的书签。
如何对我的网站或小书签进行编码,以便小书签也能获得网站图标?
我知道用户可以使用各种手动黑客技术来设置网站图标,但这些都是不受欢迎的解决方案。
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.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(9)
执行此操作的方法如下:
Gmail
基本上,该过程是获取 bookmark 标签的 ICON 属性并将其插入 bookmarklet 标签
Here is how you can do 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>
<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>
Basically the procedure is to get ICON attribute of a bookmark tag and insert it into bookmarklet tag
小书签使用
javascript://
架构,因此没有可以加载网站图标的域。因此,目前您无法为小书签提供网站图标。 像这样思考一下:记住整个 Javascript 沙箱的事情 - Javascript 可能无法访问其运行的网页域之外的任何内容? 那么,需要绑定到您正在观看的当前页面的任何域的小书签,不能同时绑定到您自己网站上的网站图标。
更新:根据 Hans Schmucker 的回答,可以创建一个小书签,当浏览器将其加载到书签菜单中时,它将生成一个带有图标的 HTML 文档。 这个推理似乎可能有效,但我还没有看到类似的事情发生,而且我的测试结果呈阴性。
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.
阅读 Tapper[ware] 和 Restafarian 网站后,这是我能想到的最简单的解决方案:
在 Chrome 和 FF 中运行良好,但 FF4 是唯一将图标保存在书签栏中的浏览器。 其外观如下:http://cl.ly/5WNR
After reading the tapper[ware] and Restafarian site, here's the simplest solution I could come up with:
Works great in Chrome and FF, but FF4 is the only browser that will save the icon in the bookmarks bar. Here's what it looks like: http://cl.ly/5WNR
这不太正确:小书签没有域,但它有一个位置(即小书签本身),您可以为其分配一个图标。 之后就是浏览器如何保存图标的问题(Firefox 会永久保存书签的图标,其他浏览器可能就没那么幸运了)。
PS Security 甚至没有发挥作用,图标可以来自任何地方。 没有限制。
请参阅http://www.tapper-ware.net/blog/?p=97< /a>
That's not quite right: A bookmarklet has no domain, but it has a location (which is the bookmarklet itself) and you can assign an icon to that. After that it's a matter of how the browser saves icons (Firefox saves a bookmark's icon permanently, you may not be so lucky with other browsers).
P.S. Security doesn't even play into it, icons can come from anywhere. There is no restriction.
See http://www.tapper-ware.net/blog/?p=97
基于 Wizek 的建议您可以将代码放入 data-uri 中。
并将所有这些保存为书签。 (尝试一下!将代码拖到选项卡栏中)
不幸的是,它仅适用于某些情况(更多信息见下文)。
工作原理:
(至少在 Chrome 中)它类似于使用
javascript 格式的书签:“...此处的 html 代码,包括将运行的 javascript 标记加载时..."
就像其他解决方案所建议的那样。 在这种情况下,您所在页面的 html将被小书签中的 html 替换,但位置保持不变并且小书签本身仍不会具有一个位置,以便 Chrome 无法为其保存网站图标。相反,使用 data-uri 书签我们会转到另一个页面,它有自己的位置,浏览器可以为其保存一个网站图标。 将其视为“在浏览器中托管网站”,如果同步书签,您就可以在其他计算机上访问该网站。 如果您想将所有内容保留在本地,您还可以使用 Base64 图像作为图标而不是 url。
它有局限性。
当您单击它时,它会离开当前页面并加载数据中的页面。 因此,您将无法将其用于与当前页面交互的书签,只能用于可以在不同页面中执行的代码。
不要使用//作为注释。 由于它们将全部保存在一行中,因此请将它们包装在 /**/ 中,并且不要忘记分号
在 FF 中它保存了图标,但如果我愿意,我无法将其设置为始终打开弹出窗口使用 window.open() 因为它不允许我保存数据 url 的默认行为
作为示例:
使用这种技术,我创建了一个带有图标生成器的小书签。 您可以将此代码拖到 URL 栏中(或将其另存为书签)来使用。 这是一个简单的页面,有一个代码输入区域和一个图标,然后生成一个带有图标的书签
另一个示例: Bookmarklet,用于在自己的小窗口中打开 Facebook Messenger
(如果您的浏览器默认阻止弹出窗口,则可能不起作用)
获取小书签图标的其他 Chrome 解决方法:
导出书签栏,对其进行编辑,然后再次导入,如本答案中所述https://superuser.com/questions/ 212722/如何将图标添加到谷歌浏览器中的书签
Based on Wizek's suggestion you can put your code into a data-uri.
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: "<html>...your html code here, including a javascript tag that will run when loaded...</html>"
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
Another Example: Bookmarklet to open Facebook messenger in it's own small window
(might not work if your browser blocks popups by default)
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.
这是一个很好的技术,几乎可以满足您的要求。
Heres a nice technique that almost does what you want.????
Works great on my Mac✅, but I couldn't get it to work on Windows 7⃣.❌
Use "Emoji"????. They are Unicode characters, that happen to also look like colorful icons. You only get to choose from a predefined list of images, but actually its not bad???? if all you are trying to do is give the user something to look???? at to remind them of what the bookmarklet does.
For example, I'm making some "security key" bookmarklet????. So I use ???? in my bookmarklet name!
????????
So basically you see the image???? in the bookmarks bar ????
Use this site to help you find an Emoji that works for your bookmarklet: http://emojipedia.org/symbols/
可以使用 javascript 和 canvas 分配和修改 favicon(请参阅令人惊叹的 favicon 游戏Favicon 的捍卫者< /a>)。 游戏的源代码将帮助您做到这一点(它基本上依赖于画布上 toDataUrl() 函数的使用,如源代码第 554 行所示)。
当单击或保存以这种方式设置网站图标的书签时会发生什么? 我不知道,但尝试一下可能会很好。 浏览器可以保存吗?
It's possible to assign and modify favicon the favicon using javascript and canvas (see the amazing favicon game Defender of the Favicon). The source code of the game will help you do that (it basically rely on use of toDataUrl() function on canvas as seen on line 554 of the source).
What happens when a bookmarlet setting the favicon this way is clicked or saved ? I don't know but it could be nice to give it a try. Browser may save it ?
我认为一种可能的方法是在书签锚点中使用 unicode 字符,例如您的图标:
http://unicode-table .com/en/#cyrillic
筛选所有可能的符号,您可能会发现与您想要的图标更相似的字符
I think that a possible way is using unicode char in bookmarklet anchor like your icon:
http://unicode-table.com/en/#cyrillic
sifting through all the possible symbols you might find the character that resembles more to the icon you want to
因此,这还不是一个完整的解决方案,但可能是朝着工作方向迈出的一步。
令我惊讶的是,在
data:
-uri 编码的 html 中对图标进行data:
编码是有效的。由于这是
,我们也可以在其中运行
。
对于某些小书签来说,这可能已经足够了。 对于其他想要修改当前页面或至少在打开新选项卡之前从中获取一些信息的人来说,运气还不错。 如果我找到办法做到这一点,我会更新这个答案。
So, this is not a full solution yet, but may be a step to a working direction.
data:
encoding of an icon in adata:
-uri encoded html works, to my surprise.Since this is
<html>
, we can run<script type="javascript">
in there too.For some bookmarklets this may already be more than enough. For others that'd like to modify the current page or at least get some info from it before opening a new tab, tough luck yet. I'll update this answer if I find a way to do that.