113

我给自己做了一个小书签，它的功能很好，但是当添加到 Opera 或 Firefox 的工具栏时，它只是采用浏览器的默认书签图标（分别为地球和星形）。我的站点有一个图标，窗口、选项卡甚至 [站点] 书签都使用我指定的图标。只是不是我的书签。

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

我知道用户可以在事后使用各种手动黑客技术来设置网站图标，但这些都是不受欢迎的解决方案。

4

9 回答 9

26

您可以这样做：

  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(){... bookmarklet JS code...})();" ICON="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABV0lEQVQ4jdWQzUoCYRiFnxl/0plso0IKX7mqXWCLIlq0qEW4d19Qi6BLCELwEgpvQbyAVrroCrSNUJFGAyrkEEEMNs5PCxtRHGsZneX7nedwzgd/LQngObfnykIQOj9Disd/BFxdZ3hVwtE0Mje3kuw9OJqGWSji1BtzYafeGHk0jTdzCIA8aXANA/O6hFWuzMBWuYJ5XcI1DF6MAY8fxmxAYHdnZK7WMAtFXF3H1XXMQhGrWsN2XR5WM/QGn2MmOBkQOj5CFoJhuTKe5DUzbJvW1jbWZhbqd/4BAIGDfSQhGH7XBehLMlruEGlFzEyTZy6AvL5G+PICWQja6iJaPu8L+zbw9B4MYpyeEB4MkF7782z+AZ1OD0WNkk4vA7AUi/HUav8eYNsOnW6XZCJBJLIwvieTcVQ1SrN5j2XbUwFTf9DpdkmnUlOwJ0VRyGY3UBVl7px/qi+cdYQvZvKCUwAAAABJRU5ErkJggg==">MyBookmarklet</A>

  1. 保存此文件
  2. 返回 Chrom Bookmarks Manager，再次单击 Organize，然后选择 Import
  3. 导入您刚刚编辑的 HTML 文件，您的书签现在有一个 favicon。

基本上，该过程是获取书签标签的 ICON 属性并将其插入到书签标签中

在此处输入图像描述

于 2016-11-05T14:59:57.160 回答
24

小书签使用javascript://模式，因此没有可以从中加载网站图标的域。

因此，目前您无法为书签提供 favicon。可以这样想：记住整个 Javascript 沙箱——Javascript 可能无法访问其运行的网页域之外的任何内容？一个小书签需要绑定到您正在观看的当前页面的任何域，不能也绑定到您自己网站上的网站图标。

更新：根据 Hans Schmucker 的回答，有可能创建一个书签，当浏览器将其加载到书签菜单中时，它将生成一个带有 favicon 的 HTML 文档。推理似乎可行，但我还没有看到这样的事情在起作用，而且我的测试结果为阴性。

于 2009-02-27T00:34:30.587 回答
13

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

于 2010-06-17T13:19:36.320 回答
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

于 2011-03-25T19:08:47.950 回答
7

根据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>...your html code here, including a javascript tag that will run when loaded...</html>"其他解决方案建议的格式的书签。在这种情况下，您所在页面的 html将被书签中的 html 替换，但位置保持不变，并且书签本身仍然没有位置，因此 Chrome 无法为其保存网站图标。

相反，使用 data-uri 书签，我们可以转到另一个页面，它有自己的位置，浏览器可以为它保存一个 favicon。将其视为“在浏览器中托管网站”，如果您同步书签，您就可以在其他计算机上访问它。如果您想将所有内容都保留在本地，您还可以为网站图标使用 base64 图像而不是 url。

它有局限性。

  • 当您单击它时，它会离开当前页面并在data中加载该页面。因此，您将无法将它用于与当前页面交互的 bookmarlets，只能用于您可以在不同页面中执行的代码。

  • 不要使用 // 进行评论。由于它们都将保存在一行中，因此将它们包装在 /**/ 中，并且不要忘记您的分号

  • 在 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 解决方法：

于 2015-09-20T04:12:22.403 回答
6

这是一种很好的技术，几乎可以满足您的需求。

在我的 Mac 上运行良好✅，但我无法让它在 Windows 7⃣ 上运行。❌</p>

使用“表情符号”。它们是 Unicode 字符，恰好也看起来像彩色图标。您只能从预定义的图像列表中进行选择，但实际上，如果您想要做的只是给用户一些可以查看的内容以提醒他们小书签的作用，那么这还不错。

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

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

使用此站点可帮助您找到适用于您的书签的表情符号：http: //emojipedia.org/symbols/

于 2012-08-13T12:59:52.927 回答
3

可以使用 javascript 和 canvas 分配和修改 favicon（请参阅令人惊叹的 favicon 游戏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);
}

当以这种方式设置网站图标的书签被单击或保存时会发生什么？我不知道，但试一试可能会很好。浏览器可以保存吗？

于 2012-05-11T15:36:12.713 回答
1

我认为一种可能的方法是在书签锚中使用 unicode char，例如您的图标：

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

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

于 2013-10-02T00:40:59.763 回答
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">在那里运行。

对于某些小书签来说，这可能已经绰绰有余了。对于其他想要修改当前页面或至少在打开新标签之前从中获取一些信息的人来说，运气不好。如果我找到办法，我会更新这个答案。

于 2016-11-28T07:49:52.677 回答