当然如果做大框的话,显示网页快照图片是最完美的。但是小框还是图标好一些。
那么要如何获取网站的图标呢?
这里介绍几种不同的方式。
第一种:利用开放的api接口获取
这种方式不需要自己考虑图标的获取细节,只要按照api的参数格式调用即可。
以上三种API参数的调用方式如下(举例获取百度的网站图标):
第三种方式的base64编码可以参考下面的php代码
还有一个网站 my.faviconkit.com ,这个就不详细介绍了,它需注册登录后才能使用。
- https://api.iowen.cn/favicon/
- https://www.google.com/s2/favicons?sz=64&domain=
- https://favicon.rss.ink/v1/
以上三种API参数的调用方式如下(举例获取百度的网站图标):
- 其使用方式就是在接口链接后加上需要获取图标的URL地址,同时要注意确保URL能够正常打开,而且不需要 http(s):// 前缀,且结尾必须填 .png。
<img src="https://api.iowen.cn/favicon/www.baidu.com.png">
- 其使用方式就是在接口链接后加上需要获取图标的URL地址,同时要注意确保URL能够正常打开,而且不需要 http(s)://www. 前缀。
<img src="https://www.google.com/s2/favicons?sz=64&domain=baidu.com">
- 这个方式稍微有些不同,它是后面加上需要获取图标的URL地址的Base64编码,编码时URL需要包含http(s):// 前缀。
<img src="https://favicon.rss.ink/v1/aHR0cHM6Ly93d3cuYmFpZHUuY29t">
第三种方式的base64编码可以参考下面的php代码
[复制到剪贴板] |
//将URL转换为base64编码
function base64($url){
$urls = parse_url($url);
//获取请求协议
$scheme = empty( $urls['scheme'] ) ? 'http://' : $urls['scheme'].'://';
//获取主机名
$host = $urls['host'];
//获取端口
$port = empty( $urls['port'] ) ? '' : ':'.$urls['port'];
$new_url = $scheme.$host.$port;
return base64_encode($new_url);
}
还有一个网站 my.faviconkit.com ,这个就不详细介绍了,它需注册登录后才能使用。
利用别人的接口总有不稳定的感觉,如果自己实现那就更好了
自己实现的简单思路:
- 通过官网链接加上/favicon.ico,可以快速获得一个网站的图标,比如:
如:获取百度图标:https://www.baidu.com/favicon.ico
- 上面的方式适合大部分网站,但不是全部网站,最保险的方式是获取网页代码,然后从head标签中查找link标签对应的icon设置。
- 不需要重复造轮子,我们可以利用现有的php和js模块。
现有模块代码下载
【NodeJs代码】app-icon-endpoint.rar
【PHP代码】fav.icns.rar
【PHP代码】getFavicon.rar
后面会写一篇文章详细介绍将php的代码模块集成到CodeIgniter4的方法。