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

本贴最后更新于 880 天前,其中的信息可能已经时移世异

⛄ 前情

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

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

image.png

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

一、网站的 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 地址为这个

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 代码实现解析网页进行批量操作,以后有空可以研究一下

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    17921 引用 • 65726 回帖
2 操作
Achuan-2 在 2021-10-21 13:00:23 更新了该帖
Achuan-2 在 2021-10-21 12:52:53 更新了该帖

相关帖子

欢迎来到这里!

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

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