在我们访问网站的时候在网站title的前面往往有一个小图标。

    如下图这些

那么这些是怎么实现的呢。

使用

其实很简单就是在head里添加

<link rel="shortcut icon" href="/favicon.ico" />

.ico文件就是这个图标，按照路径引用即可，下面我们主要说下这个图标的制作和获取。

制作

一般来说这种图标其实还是一些图片，网上也提供了很多可以直接制作ico文件的网站

在线制作ico图标

这个里面有ico图标的使用说明，也有制作说明，只要找一个图片上传上去选择要制作的尺寸即可。

获取

那么有很多网站的图标我们可以看得到缺不能像图片那样直接保存下来，如果我们想使用或者类似的图标怎么获取这些网站上的图标呢。

第一就是按照我们的使用直接在源码里找我们引用的那段代码,当然有些网站这种方式还是可以的。可是像简书你可以试一下，找不到....

我们就用到第二种方法也是比较简单的方法。使用一些公共的API 直接获取。

google：http://www.google.com/s2/favicons?domain=域名

比如想获取百度的图标

https://www.google.com/s2/favicons?domain=https://www.baidu.com

那么直接访问这个链接就会打开百度图标，保存下来再用工具制作成ico即可。

这种方法也是刚找到的记录下来，本方法参考文章链接

利用公共api提取任意网站favicon.ico图标