⛄ 前情
之前思源笔记的 Tsundoku 主题我添加了超链接的图标，真的是一个一个图标手动添加的，超累，而且网站图标如何快速获取也是一个问题，之前找不到就直接上 iconfont 找别人做的图标了。
找网站图标找的多了，有点熟能生巧，于是在此总结一次，希望能帮助到有需要的盆友。
要想知道如何获取网站的标题图标，首先需要知道这是怎么添加的，然后再反向思考如何获取？
一、网站的 favicon 是如何添加的？
添加网站的标题图标一定是有规则的，要不然浏览器是怎么正确解析并显示的呢？
我所知道的方式大概只有两种
- 自动式：在网站的根目录放 favicon.ico，名称只能为这个，一般的图标尺寸都是 16px × 16px。只要浏览器一发现了网站根目录文件里有名字叫做 favicon.ico 的文件，就会将该图标显示在访问者的地址栏和收藏夹列表中了。
- 主动式：在网页的 HTML 结构的 head 标签内直接声明 icon
-
<head> <!--通过link标签添加网站icon--> <link rel="shortcut icon" href="ico地址" type="image/x-icon"> <link rel="icon" href="ico地址" type="image/x-icon"> <head/> - 对于 rel="shortcut icon"和 rel="icon"使用的区别
- 优先使用 “shortcut icon”，因为 IE 搞特殊，只认“shortcut icon”，而对于其他浏览器大多可以把“shortcut icon”解析为 icon。这样兼容性好。
-
想了解更多见：
二、如何获取网站的 favicon？
知道了如何添加 favicon，那怎么获取就简单了
针对自动式，只要去网站主页，然后在后面添加 /favicon.ico 就可以了
针对主动式，就 Ctrl+Shift+I 打开开发者工具，然后搜索"shortcut icon"或"icon"，就能得到找到图片了
一般网络博客到这里就截止了，然后这种介绍一般不能满足生产力需求
比如我华科毕业的 CSS 大佬——张鑫旭的个人主页 ，只按第一种方式存放网站图标，html 并没有图标 link。只能去首页添加 /favicon.ico
比如阿里云盘，按第一种方式，就只会跳转到网站首页，拿不到图标，所以它只在 html 放了图标 link。只能靠主动式，去找 link 标签，icon 地址为这个
对于这类只用一种方式的“偷懒”网站们，这就麻烦了兄弟们。而且就算网站两种都支持，我每次还有手动在网站首页添加 /favicon.ico 或是在开发者工具找 link 标签也很累呀！
怎么办呢？
我前不久了解到了 JS 书签这种神奇的浏览器用法（以后再详细分享）简单说就是随便保存一个书签，然后替换书签的地址为 js 代码，点击书签就可以运行代码了
获取网页图标（favicon.ico）
针对第一种自动式，书签地址替换为下面这段，以后打开这个网页直接点击就可以运行代码，自动获取根目录下的 favicon.ico 文件了
javascript: window.location.href ="http://"+window.location.host+"/favicon.ico"
获取网页图标（解析 link 标签）
针对第二种自动式，书签地址替换成下面这段，点击这个书签，就可以自动查找 link 标签里 rel 属性包含 icon 的标签，自动跳转到对应的链接了
javascript:(function(){var a=0,b=[],c=0,b=document.getElementsByTagName("link");if(0<b.length){for(a=0;a<b.length;a++)"undefined"!==typeof b[a].rel&&-1<b[a].rel.indexOf("icon")&&(c=1,window.open(b[a].href));0===c&&alert("favico Not Found")}else alert("favico Not Found")})();
合并两种方式
然后有了上面两段代码，我们自然就想着如何合并了，见下面这段。优先搜索 link 标签，然后再找网站根目录
javascript:(function(){var a=0,b=[],c=0,b=document.getElementsByTagName("link");if(0<b.length){for(a=0;a<b.length;a++)"undefined"!==typeof b[a].rel&&-1<b[a].rel.indexOf("icon")&&(c=1,window.open(b[a].href));0===c&&window.open("http://"+window.location.host+"/favicon.ico")}else window.open("http://"+window.location.host+"/favicon.ico")})();
利用 chrome 内核
另外 chrome 内核的浏览器支持通过 chrome://favicon/+ 网站地址 的方式直接获取图标，js 代码可以改为
javascript:window.location.href ="chrome://favicon/"+window.location.href
不过好像不会自动跳转，会在页面生成纯文本，手动复制粘贴跳转也可，总比手动写方便吧？
另外这种方式虽然 100% 能获得图标，貌似图标质量不大行
附我目前的 js 书签
可能的后续
上面的 js 书签只能用于单个网页，不知道能不能用 python 代码实现解析网页进行批量操作，以后有空可以研究一下
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于