favicon.ico

favicon.ico

favicon ico webpack html

favicon 收藏夹图标， 是favorite icon的缩写，显示在浏览器收藏夹中以及地址栏左侧，或者是windows桌面上某个网页的快捷方式

这个就是favorite icon

html代码

    
    
    
        
        
        
    
    
        home page
    
    
    

1. type：Firefox支持GIF动画格式的Favicon，此时type="image/gif" 被链接文档的 MIME 类型。// 文档的 MIME 类型是设定某种扩展名的文件用一种应用程序来打开的方式类型，

2. href： 图标文件目录，此文件可以是gif，png，ico等格式；一般应放在根目录；另外注意360浏览器在安装目录下的dataico文件中会存放所浏览过所有网站的ico文件，更新前必须先删除；其他浏览器直接清除缓存就行；

3. rel：链接与文档之间的关系; 其中“shortcut icon”字符串将被多数遵守标准的浏览器识别为列出可能的关键词（“shortcut”将被忽略，而仅适用“icon”），而Internet Explorer将会把它作为一个单独的名称（“shortcut icon”）。

4. 项目没有在html文件中设置时，读取根目录下的*.ico文件

补充：

不请求这个文件

如果项目只是想在手机端访问，此时为了避免不必要的*.ico文件的访问,可以

或者

webpack打包

1. html-webpack-plugins

const htmlPlugin = new HtmlWebpackPlugin({
    favicon: path.resolve(publicDir, './favicon.ico')
})
pluginsConfig.push(htmlPlugin)

1. html-loader

{
  module: {
    rules: [
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
            options: {
              /*
              html-loader接受attrs参数, 表示标签的属性对应的需要调用的webpack的loader.
              这里加上标签的href属性, 用来打包入口index.html引入的favicon.icon文件.
              */
              attrs: ['img:src', 'link:href']
            }
          }
        ],
      }
    ]
  }
}

必要性

favicon 在一定程度上减轻服务器的流量带宽占用，一般网站会创建一个自定义的404错误文件，在这种情况下，如果网站根目录下没有相应的favicon.ico文件，每当有用户收藏网站/网页时， Web服务器都会调用这个自定义的404文件，并在网站的错误日志中记录

ico文件的制作

http://www.faviconico.org

参考文献：

有关于网站图标（和触摸图标)

favicon.ico对照表（需）