logo标签列表

如何在拖动书签工具到工具栏时设置网站图标/图标？

browsericonsbookmarkletfavicon
124

我自己制作了一个书签工具（bookmarklet），它的功能正常，但是当在Opera或Firefox中添加到工具栏时，它只使用浏览器的默认书签图标（分别为地球仪和星星）。我的网站有一个favicon，窗口、选项卡甚至是[网站]书签都使用了我指定的favicon，但我的书签工具没有使用。

如何编写我的网站或书签工具，以便书签工具也能获得favicon？

我知道用户可以使用各种手动hack技术来在事后设置favicon，但这些解决方案并不理想。

在Opera中拖动书签小工具会导致书签小工具带有Diigo图标：http://www.diigo.com/tools/diigolet - Pistos
链接对我在火狐浏览器中不起作用。 - benlumley
是的，在IE中也不行。但在Opera中可以。 :) - Pistos
抱歉，我刚试了一下Opera 9.6，在Opera中对我也不起作用。 - Guss
1
这里有一个解决方案的提案：http://wiki.whatwg.org/wiki/Link_Icons - lapo
9个回答
35

以下是您如何完成此操作的步骤：

  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>

  1. 复制整个 ICON 标记
  2. 在同一文件中找到您创建的书签工具，并将您复制的 ICON 标记插入到书签工具标记中:

<DT><A HREF="javascript:(function(){...书签脚本代码...})();" ICON="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABV0lEQVQ4jdWQzUoCYRiFnxl/0plso0IKX7mqXWCLIlq0qEW4d19Qi6BLCELwEgpvQbyAVrroCrSNUJFGAyrkEEEMNs5PCxtRHGsZneX7nedwzgd/LQngObfnykIQOj9Disd/BFxdZ3hVwtE0Mje3kuw9OJqGWSji1BtzYafeGHk0jTdzCIA8aXANA/O6hFWuzMBWuYJ5XcI1DF6MAY8fxmxAYHdnZK7WMAtFXF3H1XXMQhGrWsN2XR5WM/QGn2MmOBkQOj5CFoJhuTKe5DUzbJvW1jbWZhbqd/4BAIGDfSQhGH7XBehLMlruEGlFzEyTZy6AvL5G+PICWQja6iJaPu8L+zbw9B4MYpyeEB4MkF7782z+AZ1OD0WNkk4vA7AUi/HUav8eYNsOnW6XZCJBJLIwvieTcVQ1SrN5j2XbUwFTf9DpdkmnUlOwJ0VRyGY3UBVl7px/qi+cdYQvZvKCUwAAAABJRU5ErkJggg==">我的书签脚本</A>

  1. 保存这个文件
  2. 回到 Chrome 书签管理器，再次点击“组织”，选择“导入”
  3. 导入你刚编辑过的 HTML 文件，你的书签脚本现在有了网站图标。

基本上的步骤是获取 书签 标签的 ICON 属性并将其插入到 书签脚本 标签中。

输入图像描述

6
（这是一个很老的问题，但是……）我正在寻找一种解决方案，它完全不需要任何终端用户的操作（除了将书签添加到工具栏）。也就是说，网站所有者可以采取什么措施来指定图标。 - Pistos
3
对我来说，这是最好的答案。它有效，并且解释得很全面。非常感谢。 - tsuma534
1
6年过去了，这仍然像魔法一样运行良好。谢谢@monstro！ - Gui Ambros
非常感谢，这个方法真是太有效了！ - Tony Xu
不用客气 :) 对于我自己，我刚刚创建了一个包含所有我需要的书签工具的HTML文件，并且使用ICON标签。每当我需要一些书签工具时，我只需将其导入到Chrome并将所需的书签工具移动到书签栏（从导入的文件夹中）。 - monstro
23

一个书签脚本使用 javascript:// 模式，因此没有域名可以加载网站图标。

所以，目前你无法为一个书签脚本提供网站图标。可以这么想：记得整个 JavaScript 沙箱的事情吗——JavaScript 可以访问正在运行的网页域外的任何内容吗？那么需要绑定到当前观看的页面所在域名的书签脚本，不能也绑定到你自己网站的网站图标上。

更新：根据 Hans Schmucker 的答案，有可能创建一个书签脚本，在浏览器加载到书签菜单时会生成一个具有网站图标的 HTML 文档。这种想法似乎可行，但我还没有看到类似的实际操作，并且我的测试结果是负面的。

1
缺少 domain（例如 http-scheme）不是导致无图标书签的原因。您可以打开一个本地 HTML 文件（即 file-scheme），该文件为 favicon 提供了浏览器可读的源，然后它将出现为书签的图标。但是，对于大多数书签，这个 离线持久化的图像 通常必须手动配置。这取决于它们的来源。 - hc_dev
@hc_dev - 你所说的“手动配置”是指像monstro的答案一样吗？那当然，这是一个不错的解决方案 - 但这不是OP所问的。将域问题与本地HTML文件进行比较的问题在于，书签不会加载文件，也没有其他文档可以加载。如果你在暗示Hans Schmucker（我提到的）和Brian McAllister的答案 - 那么是的，有一个文档，但你只能运行文档或JavaScript，而不能同时运行两者，即使设置了图标（我没有成功），它也不会被保留。 - Guss
13

在阅读tapper[ware]和Restafarian网站后，我想到了最简单的解决方案:

<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

我正在尝试了解更多关于书签小程序的知识，您能否向新手解释一下代码？谢谢。 - Andrew Mackenzie
当您单击它时，它会检查当前页面的URL。如果您在存储书签的页面上（第4行），它将向页面编写一个链接元素，指向您所需的网站图标。您的浏览器将看到这个并下载网站图标。浏览器缓存此内容并将其用作书签栏中的图标。如果您在任何其他页面上，则只需执行您的书签操作。 - Brian McAllister
5
我不理解这个问题。当你把一个书签工具拖到你的收藏栏上（就像用 Delicious 书签工具 这里 那样），是什么运行了这段代码？在保存到收藏栏之前，我不明白为什么会点击书签工具（并运行代码），也就是说，在浏览器确定它的图标之后才会发生这种情况？ - dumbledad
@dumbledad，浏览器通常会根据某些事件更改现有书签的图标 - 比如单击书签，所以这没问题。我对这个答案的主要问题是通常情况下，书签本身就是您想要执行的JavaScript，但是这个示例代码将书签放在了一个下载文件中 - 这会引起一些问题：文件必须在Web上可用；必须已经加载了现有文档；不能存在跨域问题。此外 - 我无法使其工作。 - Guss
12

这并不完全正确：一个书签小程序没有域名，但它有一个位置（即书签小程序本身），你可以为它指定一个图标。之后浏览器保存图标的方式取决于具体浏览器的实现 （Firefox会永久保存书签的图标，其他浏览器可能就没那么走运了）。

另外，安全性并不是问题，图标可以来自任何地方，没有限制。

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

3
尽管这种推理听起来可能有效，但你提供的博客中的示例要么只是生成一个带有图标的文档，Firefox可能会显示该书签，要么是实际上在任意页面上运行Javascript的书签，但两者都不实现（已在Firefox 7上测试）。我仍然不确定这是否有效。 - Guss
10

根据Wizek的建议，您可以将代码放入数据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>

将所有内容保存为书签。（试一下！将代码拖到您的选项卡栏中）

不幸的是，它仅适用于某些情况（见下文）。

它是如何工作的：

（至少在Chrome中）它类似于使用格式javascript:“<html>……您的HTML代码，包括在加载时运行的javascript标记……</ html>”的书签。在这种情况下，您所在页面的HTML 将被替换为书签中的HTML，但位置保持不变，并且书签本身仍没有位置，因此Chrome无法为其保存favicon。

相比之下，使用数据URI书签，我们转到其他页面，它有自己的位置，并且浏览器可以为其保存favicon。可以将其视为“在浏览器中托管网站”，如果同步书签，则可以在其他计算机上访问它。如果要将所有内容保留在本地，则还可以使用base64图像作为favicon。

它有限制。

  • 当您单击它时，它会离开当前页面并在数据中加载页面。因此，您将无法将其用于与当前页面交互的书签，仅适用于可以在不同页面中执行的代码。

  • 不要使用//进行注释。由于所有内容都将保存在一行中，请将其包裹在/**/中，并不要忘记分号

  • 在FF中，它保存了favicon，但我无法设置它始终打开弹出窗口，如果我想使用window.open()，因为它不允许我为数据URL保存默认行为。

例如：

使用此技术，我创建了一个小型带有图标生成器的书签。您可以将此代码拖到您的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="https://maxcdn.bootstrapcdn.com/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>
    <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 to your bookmarks bar! </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(()=>{            &%2313
    alert('hello world');   /*Use this format for comments, use %2523 instead of hash (number sign)*/ &%2313
    window.history.back();  &%2313
},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>

另一个例子：书签小程序以自己的小窗口打开Facebook Messenger（如果您的浏览器默认阻止弹出窗口，则可能无法正常工作）。
data:text/html;charset=utf-8,
<html>
    <link rel="shortcut icon" href="https://facebook.com/images/messengerdotcom/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书签图标的解决方案：

2
这仅适用于Chrome和Safari。不幸的是，Mozilla不行。在我看来，书签脚本的目的是实现跨浏览器。 - sijpkes
这就像是唯一有效的东西。天哪，非常感谢你。 - Alex Beals
8
这里有一个很好的技巧，几��以达到你想�的效�。在我的Mac上�行良好✅，但我无法在Windows 7⃣上使其工作。�使用“表情符��。它们是Unicode字符，�好看起��彩色图标。您�能�预定义的图�列表中选择，但如�您�是想给用户�供一些内容以�醒他们书签脚本的作用，那么�际上并�糟糕。例如，我正在制作一些“安全密钥�书签脚本。因此，在我的书签脚本�称中使用🔑�所以基本上您�以在收��中看到图�。使用此网站帮助您找到适�您的书签脚本的表情符�：http://emojipedia.org/symbols/。
1
我刚刚收到了一堆“字体没有此代码点的字形”的标记。考虑到我正在Linux上使用Firefox，这意味着回退行为甚至无法在系统中的任何字体中找到它们。我猜测这些是那些博主一直告诉网页设计师要避免使用的Mac特定的表情符号字形，我的猜测正确吗？ - ssokolow
是的。然而，如果您知道您的客户端运行在能够显示表情符号的计算机上，那么展示它们是否很糟糕呢？对于我个人使用，我将允许用户决定是否要输出表情符号。如果不需要，则不输出任何内容，他们只会得到纯文本。 - Theo
除此之外，这种解决方案可能会在使用它的网络设计师中出现无数故障，我不愿意冒险，因为（而不是如果）某个人不可避免地在非 Mac 系统上加载我构建的东西时，我可能会留下不好的印象。 - ssokolow
1
点赞这篇文章，一部分是为了实际目的，另一部分是为了娱乐价值。表情符号是解决生活中所有问题的答案！ - Sridhar Sarnobat
提示：使用此网站复制并粘贴所需的表情符号：http://emojipedia.org/upwards-black-arrow/。 - Sridhar Sarnobat
它在Windows、Firefox和Chrome上工作得很好。好的解决方案！虽然这是一个绕路，没有直接回答问题，但可以解决90%的问题。 - Chamilyan
3
可以使用JavaScript和Canvas分配和修改网站图标（请参见令人惊叹的网站图标游戏Defender of the Favicon）。该游戏的源代码将帮助您完成此操作（它基本上依赖于在画布上使用toDataUrl()函数，如源代码的第554行所示）。
// set favicon
if( !stupidBrowser && useIcon )
{
     var    icon=$('favicon');
     (newIcon = icon.cloneNode(true)).setAttribute('href',ctx.canvas.toDataURL());
     icon.parentNode.replaceChild(newIcon,icon);
}

当以这种方式设置网站图标的书签被点击或保存时会发生什么？我不确定，但尝试一下可能是个好主意。浏览器可能会保存它吗？
2
没有解决方案。当您使用书签更改网站图标时，您仍然处于相同的位置。浏览器可能会更改当前页面的书签图标，但不会为书签分配一个图标。 - aljgom
1

所以，这还不是完整的解决方案，但可能是朝着工作方向迈出的一步。

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

对于一些书签脚本来说，这可能已经足够了。但对于其他想要修改当前页面或至少在打开新标签页之前获取一些信息的脚本来说，目前还没有办法。如果我找到了方法，我会更新这个答案。

1

我认为一种可能的方式是在书签脚本锚点中使用Unicode字符，就像您的图标一样：

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

筛选所有可能的符号，您可以找到与您想要的图标更相似的字符。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接