Allow the favicon to be cached

The favicon is currently loaded directly by url. This commit changes it to be loaded by file-loader. Note, the default vue webpack file loader doesn't support ico file types (because it seems to expect to use a png here), so add that to the file loader config. This allows bmcweb [1] to provide caching headers for the favicon, and avoid downloading a new favicon on every refresh. Tested: Webui-vue loads, favicon in the network panel loads properly. [1] https://gerrit.openbmc.org/c/openbmc/bmcweb/+/70644 Change-Id: I27e5b459ff8822294ac9273220111e9944e8d1e5 Signed-off-by: Ed Tanous <[email protected]>
openbmc · Apr 26, 2024 · 511650a · 511650a
1 parent 740cbd5
commit 511650a
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/public/index.html b/public/index.html
@@ -5,7 +5,7 @@
     <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">
+    <link rel="icon" href="<%= require('./favicon.ico') %>">
     <title>OpenBMC Web UI</title>
   </head>
   <body>

diff --git a/vue.config.js b/vue.config.js
@@ -61,6 +61,14 @@ module.exports = {
       .rule('vue')
       .use('vue-svg-inline-loader')
       .loader('vue-svg-inline-loader');
+    config.module
+      .rule('ico')
+      .test(/\.ico$/)
+      .use('file-loader')
+      .loader('file-loader')
+      .options({
+        name: '[name].[contenthash:8].[ext]',
+      });
   },
   configureWebpack: (config) => {
     config.plugins.push(