背景
很多时候我们会把常用书签放到书签栏，但是书签栏就那么大空间，为了装下更多常用书签来快捷访问，我们希望只在书签栏显示网站图标，不带网站标题。
只需要把书签名称置空就可以了。
但是这个又带来一个问题：我们公司的网站大部分都统一用【公司黑标】来做网站图标，放到书签栏就是一堆一样的图标，没有区分度！
比如上面，一个是【APM】书签，一个【玄麟】书签。是不是分不清谁是谁？
要是有办法来自定义网站图标就好了，我就可以选一个自己喜欢的图标来做书签标识了！
书签图标提取
浏览器是如何提取网站的Icon然后作为书签图标的呢？
有如下两种过程：
-
检查 HTML 中的
<link>标签
浏览器首先会解析网页的 HTML 代码，查找显式声明的 favicon 链接，优先级顺序如下：
<link rel="icon" href="path/to/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="path/to/favicon.ico" type="image/x-icon">
rel="icon"或rel="shortcut icon"是关键标识。- 如果指定多个图标，浏览器可能根据
type（如image/png）或sizes属性选择最合适的（例如优先选择 32x32 或 48x48 的图标）。
-
默认路径：
/favicon.ico
如果 HTML 中没有显式声明，浏览器会尝试访问网站根目录下的默认文件：
- 自动请求 ： 浏览器会向
https://example.com/favicon.ico发起请求（即使该路径未在 HTML 中提及）。 - 历史原因 ： 这是早期浏览器的约定俗成规则，许多网站仍沿用此方式。
修改书签图标
我们的需求很合理也很常见，所以有人帮我们做了！
-
安装插件
Chrome插件-Bookmark Favicon Changer
-
找一个自己喜欢的图标
可以从下面的网站上挑一个喜欢的图标，然后下载【png】文件。
https://simpleicons.org/
https://iconpark.oceanengine.com/official
https://icon-sets.iconify.design/
https://lucide.dev/icons/
-
更换网站图标
就比如【毒家博客】吧，我们给他换个图标好了！
-
下载好我们喜欢的图标文件
-
打开书签网站，点击【插件】，更换图标
-
图标生效啦
好了，现在书签栏的图标有区分度了！
总结
只是一个简单的小技巧，但是我相信一定可以帮助到很多【强迫症患者】！
