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

⛄ 前情

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

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

image.png

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

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

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

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

想了解更多见:

二、如何获取网站的 favicon?

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

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

针对主动式,就 Ctrl+Shift+I 打开开发者工具,然后搜索"shortcut icon"或"icon",就能得到找到图片了

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

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

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

image.png

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

怎么办呢?

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

获取网页图标(favicon.ico)

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

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

针对第二种自动式,书签地址替换成下面这段,点击这个书签,就可以自动查找 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 书签

image.png

可能的后续

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

  • 思源笔记开发者
    37 引用 • 131 回帖 • 2 关注
  • 前端

    前端技术一般分为前端设计和前端开发,前端设计可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括 HTML、CSS 以及 JavaScript 等。

    242 引用 • 1345 回帖
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    694 引用 • 1142 回帖 • 612 关注
2 操作
Achuan-2 在 2021-10-21 13:00:23 更新了该帖
Achuan-2 在 2021-10-21 12:52:53 更新了该帖

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...