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 书签栏图标显示不正常