favicon.ico

最新推荐文章于 2021-03-12 19:53:07 发布

weixin_33811539

最新推荐文章于 2021-03-12 19:53:07 发布

阅读量582

点赞数

文章标签： webpack xhtml 操作系统 ViewUI

原文链接：https://segmentfault.com/a/1190000010680948

版权

favicon.ico

favicon ico webpack html

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

这个就是favorite icon

html代码

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>home page</title>
        <link rel="icon" href="Images/github.ico" type="image/x-icon" />
        <link rel="shortcut icon" href="Images/github.ico" type="image/x-icon" />
    </head>
    <body>
        home page
    </body>
    </html>

type：Firefox支持GIF动画格式的Favicon，此时type="image/gif" 被链接文档的 MIME 类型。// 文档的 MIME 类型是设定某种扩展名的文件用一种应用程序来打开的方式类型，
href：图标文件目录，此文件可以是gif，png，ico等格式；一般应放在根目录；另外注意360浏览器在安装目录下的dataico文件中会存放所浏览过所有网站的ico文件，更新前必须先删除；其他浏览器直接清除缓存就行；
rel：链接与文档之间的关系; 其中“shortcut icon”字符串将被多数遵守标准的浏览器识别为列出可能的关键词（“shortcut”将被忽略，而仅适用“icon”），而Internet Explorer将会把它作为一个单独的名称（“shortcut icon”）。
项目没有在html文件中设置时，读取根目录下的*.ico文件

补充：

不请求这个文件

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

<link rel="icon" href="data:;base64,=">
或者
<link rel="icon" href="data:image/ico;base64,aWNv">

webpack打包

html-webpack-plugins

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

html-loader

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