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

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

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

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

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

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

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

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

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

2. 将书签导出到 HTML 文件

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

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

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

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

图中 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 书签栏中的网站 Favicon 图标 4
即刻就能看到带图标的书签了,步骤已经尽可能的详尽,有问题留言吧

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

48 条留言

  1. drunkcloud 2012/12/26 回复
  2. leaveonly 2012/12/26 回复
  3. 钢盅郭子 2012/12/28 回复
  4. 王沛昕 2013/01/24 回复
  5. 王沛昕 2013/01/25 回复
  6. 张善腾 2013/02/01 回复
  7. 卡比图 2013/10/03 回复

写留言