详细介绍HTML的favicon尺寸、格式和制作等相关知识

一、Favicon图标有什么作用？

Favicon图标用于帮助用户更轻松地在浏览器、书签、快捷方式和地址栏中直观地识别出你的网站，也让用户更容易在他们的浏览器上保存和记住你的网站。作为经常被忽视的主要品牌元素，一个好看的Favicon图标可以让你的网站在众多竞争对手中脱颖而出。

二、常见的favicon图标格式有哪些？

Favicon通常使用下面这几种文件格式：

ICO - favicon.ico 最常见的favicon图标格式是 ICO、PNG 和 SVG，但对于特定的浏览器或设备还有其他格式。ICO 文件格式由 Microsoft 开发，是 favicon 的原始文件格式。该格式是独一无二的，因为它允许在同一个文件中包含多个小图像。这是最大的优势，因为 ICO 格式（16x16、32x32 和 48x48 像素）的favicon图标所需的小图标可以独立缩放和优化。在小尺寸下，你不能依靠浏览器以最佳方式自动调整图标大小。所有浏览器都支持 ICO 格式，它是 IE5 ～IE10 唯一支持的格式。
PNG - favicon.png PNG 格式是一种很棒的格式，因为它是大多数人熟悉的格式，并且不需要任何特殊工具来创建。随着现代屏幕的高分辨率，小分辨率的小图标尺寸的原始问题不再存在。对于支持 PNG favicon 图标格式的浏览器，通常在浏览器选项卡或书签栏中显示的 favicon 的质量将高于 ICO 格式。PNG 格式的缺点是它与 IE5 ～ IE10 不兼容。
SVG - favicon.svg SVG 格式优于 PNG 和 ICO 格式，但大多数浏览器都不支持。SVG 文件非常轻量级，并且可以无限扩展，图像质量高，而且没有大图片加载消耗时间长的问题。目前只有 Chrome、Firefox 和 Opera 支持 SVG 格式的网站图标。

三、Favicon图标会影响搜索引擎排名或SEO吗？

Favicon图标可间接帮助你优化搜索引擎（SEO）：有些搜索引擎会在搜索结果中显示你的 Favicon图标。一个吸引力的Favicon图标能够提高在这些搜索引擎上点击率（CTR）。此外，Favicon图标是建立品牌认知度和品牌专业度的必要条件，缺失Favicon图标可能会降低用户对网站的信任并增加跳出率。

四、常见的favicon图标大小有哪些？

首先，你的favicon图标必须是方形的，由于桌面浏览器和IOS不支持其他形状的图标。

对于 ICO 格式，推荐的尺寸为 16x16、32x32 和 48x48 像素。

对于 PNG 格式，推荐的尺寸为 16x16 和 32x32，不过浏览器可以兼容任何方形 PNG 图像。

favicon.ico

ICO格式的图片和PNG格式图片是不一样的，PNG图片就是一张单独的图片，但是作为Favicon的ICO格式图片应该是一组16×16、32×32和48×48图像集合。所以，一张PNG图标格式转换成ICO格式后尺寸会大很多，是因为这个ICO图标包含了多个尺寸。

有些人会直接把.png图标改后缀为.ico来使用，这种用法是错误的，两种类型的图标是不一样的，但是很诡异的是，有些浏览器足够的智能，虽然你的后缀是.ico，其也能正确解析为PNG格式。

微软官方是推荐把16×16, 32×32 以及 48×48这几个尺寸的图标整合在favicon.ico中的。例如，IE会把16×16版本的用在浏览器的地址栏上，而32×32这个尺寸用在快捷任务栏上。

使用示意如下：

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

注意，我们直接使用rel="icon"就可以了，现在很多网站依然使用rel="shortcut icon"，这是一种过时的用法，可以被淘汰掉了。

当然，对于favicon.ico的使用，最推荐的做法是放在网站的根目录下，不需要有任何额外的声明。同时在页面头部声明PNG格式的favicon，给现代浏览器使用，因为体积更小，使用也更灵活。

PNG icons

对于现代桌面浏览器，推荐使用PNG图标作为favicon。

通常期望的尺寸是 16×16, 32×32以及越大越好。例如，MacOS/Safari使用196×196尺寸图标，如果这是这些浏览器能够找到的最大的图片。

那应该推荐什么尺寸是什么呢？下面是一些平台favicon最佳尺寸列表：

绝大多数桌面浏览器：16×16, 32×32以及尽可能大
Android Chrome：192×192
Google TV：96×96
其他平台自己可以找找文档，查查资料。

我们还可以使用sizes属性指定PNG图标的尺寸，这样浏览器自己可以选择合适尺寸的小图标。

例如：

<link rel="icon" type="image/png" href="/favicon-16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32.png" sizes="32x32">
...

我们可以实际测试下这种sizes尺寸设定在常见桌面浏览器下的效果：

您可以狠狠地点击这里：PNG格式favicon多个尺寸设置测试demo

测试HTML如下：

<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">

结果，Chrome，Firefox，IE edge下小图标均换成了圆角的“鑫”：

然后我们来看下请求：

Chrome浏览器下请求的是32×32的尺寸PNG图标：

Chrome请求32x32尺寸图标

Firefox则是请求16×16以及128×128这两个尺寸：

Firefox请求的两个图标尺寸

16×16应该用来显示在地址栏上，128×128这个尺寸不知道干什么用的，需要专业人士告知了。，

五、favicon的生成

favicon.ico类型的文件生成需要专门的工具，不像PNG这么方便。

之前我都是下载个工具制作，不过这样做成本有点高，其实有很多在线的favicon生成工具做的很不错的。

推荐这个：https://realfavicongenerator.net/

无广无告，作者对favicon研究很深入，适合于多种平台，还支持favicon压缩。

浏览器截图

例如，选一张“鑫”图片：

其可以生成在各个平台下favicon，以及预览效果：

各个平台图标生成

其他备选在线页面（有广有告）：

六、Favicon与404

本地网页开发的时候，Chrome浏览器经常可以看到 favicon.ico 404错误，这个可以忽略，只要线上服务器跟地址有favicon.ico就可以了，不要担心上线会出问题，因为网页如果没有指定favicon浏览器会自动从域名的根目录下查找名为favicon.ico的文件，如果找不到就会404。

如果本地这个错误提示让你很烦，则你可以制作一个和线上favicon.ico形状图形一样，但颜色不同的favicon.ico放在本地开发目录的跟地址中。颜色不同的建议是：线上favicon蓝色系的，则本地环境的favicon.ico使用橙色或者红色；线上favicon橙色系的，本地使用蓝色系。

这样一眼就看清楚到底是线上环境还是本地环境，免得数据测试的时候不小心在线上环境操作。我找了张css-tricks的示意图：

本地和线上使用不同的favicon

七、favicon与base64

favicon除了使用线上地址，还支持base64格式内联，例如：

<link rel="icon" href="data:image/x-icon;base64,AAABAA...8AAA==" type="image/x-icon" />

file://协议打开的本地HTML静态页面可以使用这种方式让浏览器地址栏的favicon显示。

八、结束语

下面这段是供大家参考的favicon现代用法，跨PC和移动端的项目可以参考参考：

<!-- place this in your <head></head> -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="icon" sizes="16x16 32x32 64x64" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="196x196" href="/favicon-192.png">
<link rel="icon" type="image/png" sizes="160x160" href="/favicon-160.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96.png">
<link rel="icon" type="image/png" sizes="64x64" href="/favicon-64.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
<link rel="apple-touch-icon" href="/favicon-57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/favicon-114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/favicon-72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/favicon-144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/favicon-60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/favicon-120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/favicon-76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/favicon-152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180.png">

另外，windows 8+系统还有browserconfig.xml的概念，可以用来创建贴片图标，类似下图这样：

windows贴片图标

使用示意：

<!-- place this in your <head></head> -->
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="/favicon-144.png">
<meta name="msapplication-config" content="/browserconfig.xml">

browserconfig.xml内容示意：

<browserconfig>
    <msapplication>
        <tile>
            <square70x70logo src="/favicon-70.png"/>
            <square150x150logo src="/favicon-150.png"/>
            <square310x310logo src="/favicon-310.png"/>
            <TileColor>#FFFFFF</TileColor>
        </tile>
    </msapplication>
</browserconfig>

总之，favicon的水还是很深了，因为不同平台下的尺寸啊，使用方式啊都有所不同，本文的内容也只能尽量涉及。

如果以后出现新的平台，例如鸿蒙操作系统，说不定又是另外的favicon尺寸规则。

本文大部分内容源自这个stackoverflow问题的最高赞回答，然后结合其他一些我知道的favicon知识整理而成。

文章素材来源网络。