browser - 当书签拖到工具栏时如何设置图标/图标?

标签 browser icons bookmarklet favicon

我为自己制作了一个小书签,它的功能很好,但当添加到 Opera 或 Firefox 的工具栏时,它只是呈现浏览器的默认书签图标(分别是地球仪和星星)。我的网站有一个网站图标,窗口、选项卡甚至 [网站] 书签都使用我指定的网站图标。只是不是我的书签。

如何对我的网站或小书签进行编码,以便小书签也能获取网站图标?

我知道用户可以使用各种手动黑客技术来设置网站图标,但这些都是不可取的解决方案。

最佳答案

以下是您可以执行此操作的方法:

  1. 将您的书签拖到书签栏。
  2. 在其旁边创建您要用于小书签的网站图标的书签。
  3. 打开书签管理器,单击组织下拉列表,然后选择导出,将书签保存为 html 文件。
  4. 在文本编辑器中打开该 html 文件。
  5. 找到您刚刚创建的书签,假设是 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 标记
  • 在同一文件中找到您创建的小书签,然后将复制的 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 书签管理器,再次点击“组织”,然后选择“导入”
  • 导入您刚刚编辑的 HTML 文件,您的书签现在有一个网站图标
  • 基本上,该过程是获取<​​strong>bookmark标签的ICON属性并将其插入bookmarklet标签

    enter image description here

    关于browser - 当书签拖到工具栏时如何设置图标/图标?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/521040/

    相关文章:

    html - 对于所有客户端,http ://example. com//的处理方式是否与 http ://example. com/不同?

    android - Android 上不同分辨率的不同图标大小

    qt - .ico图标未在Windows上显示

    javascript - 使用javascript在网页中查找和替换

    javascript - Chrome 扩展 - 激活当前选项卡的 popup.html 中的脚本

    html - 将您的 favicon.ico 文件放在非根路径中是个坏主意吗?

    html - 打开一个新的浏览器窗口而不使用目标 ="_blank"

    javascript - 如何使用控制台中的代码关闭浏览器控制台

    html - 如何将背景图像添加到 Font Awesome 图标?

    javascript - 修改 document.location 以便打开新选项卡/窗口而不是在当前选项卡中导航