关于生成网站favicon图标 - 也许你不知道的事

favicon是什么？

favicon

如上图就是favicon。

我相信肯定有不少人认为：网站图标不就一个favicon.icon就完了吗？

其实不然，这里面有多学问。

下面慢慢道来。

格式问题

1、常见的就是favicon.ico 也即.ico格式。

2、第二种也就是png。

类型的图标所有桌面浏览器都支持，包括以前的IE浏览器。

png格式就是现代主流浏览器都支持的一种格式。【包括IE11，Chrome, Firefox】

所以我们网站为了较好的兼容性和现代化，最好将两种格式的一起使用

尺寸问题

favicon

首先，规格是n*n是没问题的。看网上的一些转换网站，可以看出，一般有16x16，32x32，48x48，64x64，128x128这几个尺寸。

尺寸问题

微软官方是推荐把16×16, 32×32 以及 48×48这几个尺寸的图标整合在favicon.ico中的。

然后在HTML使用

<link rel="icon" href="/favicon.ico" type="image/x-icon">

当然，默认并且推荐的做法是吧favicon.ico文件放到网站根目录下。

Png

现代化浏览器更推荐png图标用作favicon

通常期望的尺寸是 16×16, 32×32。当然，其实大一点更好，想16x16过于小了。在一些平台的浏览器下显示鲜果肯定差强人意。

我们可以设置sizes来告诉浏览器此图标的大小：

<link rel="icon" type="image/png" href="./xin-16.png" sizes="16x16">
<link rel="icon" type="image/png" href="./xin-32.png" sizes="32x32">
<link rel="icon" type="image/png" href="./xin-64.png" sizes="64x64">
<link rel="icon" type="image/png" href="./xin-128.png" sizes="128x128">

比如以本站【迷思雨】为例，我准备了不同的尺寸来满足不同平台和浏览器的要求。

不同favicon尺寸

抓包看出，谷歌Chrome浏览器默认找的是32x32的尺寸：

Chrome favicon尺寸

那我们不是做个favicon.ico图标都要做很多张？？

当然没必要，有网站可以在线生成favicon【不仅是png生成ico还生成了html代码哦】

在线生成

网站：https://realfavicongenerator.net/

在线生成favicon网站

而我们只需要准备一张260x260的png格式的图片即可。

比如我这里准备一张260x260的png图片：

260x260图片

1、上传

上传图片

2、调整参数

调整参数

调整参数2

3、点击生成

截图-1565963814

4、下载文件部署

下载文件部署

5、下载的文件示例

下载的文件示例

可以看出，这里包含了许多格式的图标，并且代码都是生成好了的，我们只需用即可。

并且，该网站是免费的！！！！