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

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

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

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

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

1. 获得想要自定义的 Favicon 图标（以93876软件园为例）及要修改的书签

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

2. 将书签导出到 HTML 文件

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

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

3.1 搜索 “93876软件园”，找到我们之前添加的带图标的书签，如下：

图中 1 为带图标的 93876软件园 书签，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 书签栏图标显示不正常