如何修改 Chrome 书签栏中的网站 Favicon 图标

Chrome 可以在书签栏上显示网站 Favicon 图标,而如果将每个书签名称清空,就会只显示 Favicon 图标,比如这样:

对于书签栏上熟悉的网站,我们是可以通过 Favicon 图标直接认出网站并访问的,这样就为书签栏节约了很多空间,也更加美观。

但如小书签按钮这类书签是无法显示图标的,上图最丑的那个图标就是一个小书签,Chrome 没有给我们提供自定义 Favicon 图标的机会,只有网站自身带有 Favicon 图标,Chrome 才能自动识别。

那么如何自定义修改 Chrome 书签栏中的网站 Favicon 图标呢?很简单,按步骤来:

1. 获得想要自定义的 Favicon 图标(以小众软件为例)及要修改的书签

首先添加 http://www.appinn.com 至书签栏,可以看到一个水滴形的 Favicon 图标就出现了(红色箭头),再添加待修改的书签(蓝色箭头)

2. 将书签导出到 HTML 文件

位于 Chrome 菜单栏 > 书签 > 书签管理器 > 整理 > 导出,得到 HTML 文件(文件名类似 bookmarks_12-12-26.html)

3. 用文本编辑器打开 bookmarks_12-12-26.html 文件

3.1 搜索 “小众软件”,找到我们之前添加的带图标的书签,如下:

图中 1 为带图标的 小众软件 书签,2 为要修改的无图标的书签

注意箭头所指 ICON 部分即为 Favicon 图标信息!

3.2 选中并复制整个 ICON 部分,并带引号

ICON=”data:image/png;base64,iVBORw …(此处省略…)…Qz0AAAAAElFTkSuQmCC”

3.3 将复制的代码加入要修改的书签中

图中为 2 部分 ADD_DATE=”135374787″ 后面,即修改为

ADD_DATE=”135374787″ ICON=”data:image/png;base64,iVBORw …(此处省略…)…Qz0AAAAAElFTkSuQmCC”

4. 保存 bookmarks_12-12-26.html 文件

5. 从 HTML 文件导入书签(导入前记得清空所有书签,否则会重复)


即刻就能看到带图标的书签了,步骤已经尽可能的详尽,有问题留言吧

相关文章:如何修复 Chrome 书签栏图标显示不正常

×用微信扫描并分享

48 Comments

  1. viko16 2012/12/26 Reply
  2. Poaceae 2012/12/26 Reply
  3. iyue 2012/12/26 Reply
    • scavin 2012/12/26 Reply
      • iyue 2012/12/26 Reply
    • Bingoo 2012/12/29 Reply
  4. Shore 2012/12/26 Reply
  5. N_N 2012/12/26 Reply
    • Nuance 2012/12/26 Reply
    • scavin 2012/12/26 Reply
    • 大象 2012/12/26 Reply
  6. zxq 2012/12/26 Reply
  7. Dgny 2012/12/26 Reply
  8. Chaos 2012/12/26 Reply
  9. drunkcloud 2012/12/26 Reply
  10. leaveonly 2012/12/26 Reply
  11. 醉倚黄昏 2012/12/26 Reply
  12. Ryan Yan 2012/12/26 Reply
  13. imever 2012/12/26 Reply
  14. hyknife 2012/12/26 Reply
  15. root 2012/12/26 Reply
  16. zero 2012/12/26 Reply
  17. 稻米鼠 2012/12/26 Reply
  18. jetorz 2012/12/26 Reply
  19. forinec 2012/12/26 Reply
  20. qingwu 2012/12/26 Reply
  21. skystar 2012/12/26 Reply
  22. LxxYxxZxx 2012/12/27 Reply
  23. Seven Yu 2012/12/27 Reply
  24. Jessy 2012/12/28 Reply
  25. 钢盅郭子 2012/12/28 Reply
  26. simy 2013/01/08 Reply
  27. hanzy 2013/01/14 Reply
  28. 王沛昕 2013/01/24 Reply
    • scavin 2013/01/24 Reply
      • 王沛昕 2013/01/24 Reply
      • 王沛昕 2013/01/24 Reply
  29. 王沛昕 2013/01/25 Reply
  30. 张善腾 2013/02/01 Reply
  31. 卡比图 2013/10/03 Reply

Leave a Reply