favicon.ico学习（⼀）什么是favicon.ico，为何我的浏览器会向
其秘密发送请求？
favicon.ico是什么？
所谓favicon，即Favorites Icon的缩写，是指显⽰在浏览器收藏夹、地址栏和标签标题前⾯的个性化图标。以图标的⽅式区别不同的⽹站。
favicon.ico是⼀个⽹站必要的吗？
不是必要的，当您使⽤浏览器浏览不同站点时，浏览器将⾃动发送请求。如果您的浏览器收到有效 favicon.ico ⽂件，将显⽰此图标。如果未收到，则不会显⽰特殊图标，会报404错误，并且会记录到错误⽇志中，所以最好的设置。
favicon.ico怎么设置？
第⼀种⽅式：放在根⽬录
这种⽅法最简单，在服务器根⽬录下放⼀个favicon.ico的⽂件，浏览器发现后就会使⽤。（把做好的favicon.ico图标⽂件上传到⽹站根⽬录，并命名为xxx.icon就可以了；）
注：这种⽅式，ico⽂件的名称⼀定要叫：favicon
第⼆种⽅法：link标签
在head⾥⾯加⼊代码：
<link rel="shortcut icon" href="ico⽂件url">
或
<link rel="icon" href="../favicon.ico">
或
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
注：这种⽅式，ico⽂件的名称就可任意命名了。
chrome浏览器是什么浏览器图标
第⼀种⽅法设置的是全站的，第⼆种⽅法可以针对某个⽹页单独设置ico（但是该图标的路径⼀定要使⽤绝对路径）。
注意，我们直接使⽤rel="icon"就可以了，现在很多⽹站依然使⽤rel="shortcut icon"，这是⼀种过时的⽤法，可以被淘汰掉了。
可以直接使⽤：
<link rel="icon" href="/path/to/icons/favicon.ico" type="image/x-icon">
favicon的格式⼀定是ico格式吗？
favicon的格式不⼀定是ico格式，它可以是png，jpg甚⾄是gif，不过ico格式是所有浏览器都⽀持的。
favicon.ico的尺⼨有16×16、32×32、48×48，在添加到桌⾯、任务栏⼩尺⼨的图标就不是很理想了，这就需要多种尺⼨兼容各种设备和情况。
favicon.icon⽂件怎么制作？
如何让⽹站不去请求favorites icon？
在做 H5 混合应⽤的时候，不希望产⽣ favicon.ico 的请求。可以在页⾯的 <head> 区域，加上如下代码实现屏蔽：
<link rel="icon" href="data:;base64,=">
或者详细⼀点
<link rel="icon" href="data:image/ico;base64,aWNv">
补充
Favicon是favorites icon的缩写，亦被称为website icon（⽹页图标）、page icon（页⾯图标）或urlicon（图标）。Favicon是与某个或相关
联的。⽹站设计者可以多种⽅式创建这种图标，⽽⽬前也有很多⽀持此功能。浏览器可以将favicon显⽰于浏览器的地址栏中，也可置于书签列表的⽹站名前，还可以放在标签式浏览界⾯中的页标题前。
最初，定义⼀个favicon的⽅法是将⼀个名为“favicon.ico”的置于的下，的收藏夹（即书签）可以⾃动显⽰该⽂件。后来出现了⼀种更为灵活的⽅法，即使⽤来为任何⼀个⽹页指⽰其图标所存储的位置。这种⽅法是通过在页⾯的<head>部分添加两个link组件来实现的。这样，任何⼀个适当⼤⼩的（16×16或更⼤）的图像都可以⽤作favicon。尽管如此，多数情况下仍然使⽤格式。其他⽹页浏览器现在也⽀持（便携式⽹络图⽚）格式，和（图形交换格式）动画图像格式。
市⾯上多数浏览器同时⽀持上述两种⽅法。正因此，⽹络服务器要接受很多对“favicon.ico”⽂件的请求，即使该⽂件根本不存在。⽹站管理员对此很不满，因为这样会增加⼤量的项，并导致很多不必要的读取和、⽹络资源的占⽤。另⼀个常见的问题是，当清除浏览器的
后，favicon可能会消失。
标准化
Favicon功能最早由创设，⽽微软公司的Internet Explorer⽹页浏览器会对每⼀个⽹站都请求favicon。微软⽀持的link标签不遵从的HTML建议，因为：
rel属性必须包含⼀个⽤空格作分隔符的link类型的列表，所以⼀个包含两词的link类型不能被遵守标准的浏览器理解。
“”⽂件类型（⼀种⽤于Microsoft 上图标的格式）没有⼀个注册的MIME类型，⽽且似乎在当时也不能被多数浏览器理解。然⽽2003年，这⼀格式在获得注册，其MIME类型是image/vnd.microsoft.icon，进⽽消除了此问题的第⼀部分。
浏览器通过⼀种遵从Web标准的⽅法添加了对favicon的⽀持。它采⽤rel="icon"并允许⽹络设计⼈员添加任何⽀持的图像格式的
favicon。例如<link rel="icon" type="image/png" href="/path/image.png" />。后来鉴于此功能将被⽤于所有新内容，多数浏览器都对此功能增加了⽀持。
根据《HTML 4.01 Specification W3C Recommendation 24 December 1999》，rel属性的取值仅有：
Alternate
Stylesheet
Start
Next
Prev
Contents
Index
Glossary
Copyright
Chapter
Section
Subsection
Appendix
Help
Bookmark
如果要采⽤其他值，应当在head标签中的profile属性中进⾏⾃定义。
指导
过去，为保证favicon出现，⽹站设计者和开发者采⽤了多种⽅法。很难明确地保证favicon可以在所有电脑上显⽰，即使是⽤同⼀版本的⼀种浏览器。
下列代码另⼀个局限就是它把favicon关联到了某个特定的HTML或⽂档上。为避免这⼀点，favicon.ico⽂件应置于根⽬录下。多数浏览器将⾃动检测并使⽤它。
建议包含以下两⾏HTML代码：
<link rel="shortcut icon" href="example/favicon.ico" type="image/vnd.microsoft.icon" />
<link rel="icon" href="example/favicon.ico" type="image/vnd.microsoft.icon" />
然⽽，只有第⼀⾏是必须的，因为“shortcut icon”字符串将被多数遵守标准的浏览器识别为列出可能的关键词（“shortcut”将被忽略，⽽仅使⽤“icon”）；⽽Internet Explorer将会把它作为⼀个单独的名称（“shortcut icon”）。这样做的结果是所有浏览器都可以理解此代码。只有当希望为新浏览器提供另⼀种备⽤图像（例如动画GIF）时，才有必要添加第⼆⾏。
在HTML中，link组件必须在head组件⾥（在<head>和</head>之间）。
对于XHTML，link必须使⽤“ />”结束（或“></link>”），⽽不可以使⽤“>”结束。
href可以，但不必指向/favicon.ico的位置。它可以指向任何URL。
图像通常可以使⽤任何被浏览器⽀持的图像格式。
.ico⽂件格式通常可以被所有可以显⽰favicon的浏览器读取。
设置服务器，以发送正确的标识：
ICO ⽂件image/vnd.microsoft.icon（或者亦可出于兼容性原因使⽤image/x-icon。然⽽最好使⽤，因为多数主流浏览器现在⽀持它）
GIF ⽂件image/gif
PNG ⽂件image/png
使⽤适当的和。
ICO：包括多种分辨率（最常使⽤的是16×16和32×32，有时使⽤64×64和128×128）以及位深（⽐特每像素）（多数使⽤4、8、
24 bpp，即16、256和1600万⾊）。
GIF：使⽤16×16，256⾊。
PNG：使⽤16×16，256⾊或24位。
注意：当favicon.ico被置于⽂档根⽬录时，将会被⼀些不处理link组件的浏览器到，即使没有您的站点
上没有指向它的链接。
参考