⛄ 前情

之前思源笔记的 Tsundoku 主题我添加了超链接的图标，真的是一个一个图标手动添加的，超累，而且网站图标如何快速获取也是一个问题，之前找不到就直接上 iconfont 找别人做的图标了。

找网站图标找的多了，有点熟能生巧，于是在此总结一次，希望能帮助到有需要的盆友。

总结:如何获取网站的 favicon - 图1

要想知道如何获取网站的标题图标，首先需要知道这是怎么添加的，然后再反向思考如何获取？

一、网站的 favicon 是如何添加的？

添加网站的标题图标一定是有规则的，要不然浏览器是怎么正确解析并显示的呢？

我所知道的方式大概只有两种

  • 自动式：在网站的根目录放 favicon.ico，名称只能为这个，一般的图标尺寸都是 16px × 16px。只要浏览器一发现了网站根目录文件里有名字叫做 favicon.ico 的文件，就会将该图标显示在访问者的地址栏和收藏夹列表中了。
  • 主动式：在网页的 HTML 结构的 head 标签内直接声明 icon
    对于 rel=”shortcut icon”和 rel=”icon”使用的区别：”shortcut icon”是冗余的，IE9 以下只支持”shortcut icon”而不支持”shortcut icon”（前端就是那么多历史遗留）。不过对于其他浏览器可以把“shortcut icon”解析为 “icon”，能保证兼容性。 
    1. <head>
    2. <!--通过link标签添加网站icon-->
    3. <link rel="shortcut icon" href="https://example.com/image.ico">
    4. <link rel="icon" href="https://example.com/image.ico">
    5. <head/>

想了解更多见： Favicon - Wikipedia

二、如何获取网站的 favicon？

知道了如何添加 favicon，那怎么获取就简单了

针对自动式，只要去网站主页，然后在后面添加 /favicon.ico 就可以了

针对主动式，就 打开开发者工具，然后搜索”shortcut icon”或”icon”，就能得到找到图片了

一般网络博客到这里就截止了，然后这种介绍一般不能满足生产力需求

比如我华科毕业的 CSS 大佬——张鑫旭的个人主页 ，只按第一种方式存放网站图标，html 并没有图标 link。只能去首页添加 /favicon.ico

比如阿里云盘，按第一种方式，就只会跳转到网站首页，拿不到图标，所以它只在 html 放了图标 link。只能靠主动式，去找 link 标签，icon 地址为这个

总结:如何获取网站的 favicon - 图2

对于这类只用一种方式的“偷懒”网站们，这就麻烦了兄弟们。而且就算网站两种都支持，我每次还有手动在网站首页添加 /favicon.ico 或是在开发者工具找 link 标签也很累呀！

怎么办呢？

我前不久了解到了 JS 书签这种神奇的浏览器用法（以后再详细分享）简单说就是随便保存一个书签，然后替换书签的地址为 js 代码，点击书签就可以运行代码了。

获取网页图标（favicon.ico）

针对第一种自动式，书签地址替换为下面这段，以后打开这个网页直接点击就可以运行代码，自动获取根目录下的 favicon.ico 文件了

  1. javascript: window.location.href ="http://"+window.location.host+"/favicon.ico"

获取网页图标（解析 link 标签）

针对第二种自动式，书签地址替换成下面这段，点击这个书签，就可以自动查找 link 标签里 rel 属性包含 icon 的标签，自动跳转到对应的链接了

  1. 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("favicon Not Found")}else alert("favicon Not Found")})();

合并两种方式

然后有了上面两段代码，我们自然就想着如何合并了，见下面这段。优先搜索 link 标签，然后再找网站根目录

  1. 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 代码可以改为

  1. javascript:window.location.href ="chrome://favicon/"+window.location.href

不过好像不会自动跳转，只会在页面生成纯文本，手动复制粘贴跳转也可，总比手动写方便吧？

另外这种方式虽然 100% 能获得图标，貌似图标质量不大行，不太清楚获得的原理

可能的后续

上面的 js 书签只能用于单个网页，不知道能不能用 python 代码实现解析网页进行批量操作，以后有空可以研究一下