解决Vue项目在火狐浏览器favicon.ico不显示的问题

解决Vue项目在火狐浏览器favicon.ico不显示的问题

  • 出现该问题的原因:
    可能是打包后自动生成的link标签导致了head中的link标签失效,如下图所示
    webpak打包后的代码中出现了这样的标签
  • 解决思路:
    既然是打包过程中出现了link标签覆盖失效的问题,那么只需要保证我们自己的配置能够覆盖自动生成的配置即可。
    即将link标签加到文件最后,加?的写法是据说firefox browser favicon.ico显示有bug
 * @LastEditTime: 2023-04-07 15:07:37
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" type="image/x-icon" />
    <link rel="shortcut icon" href=".<%= BASE_URL %>favicon.ico" type="image/x-icon"  />
    <title></title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
  <!-- 解决火狐浏览器显示图标的问题 -->
  <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
  <link rel="icon" href="<%= BASE_URL %>favicon.ico" type="image/x-icon" />
  <link rel="icon" href="<%= BASE_URL %>favicon.ico?" />
  <link rel="icon" href="<%= BASE_URL %>favicon.ico?" type="image/x-icon" />
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容