Stop embedding favicon.png as a data: URI dozens of times per page

Refer to it by its extremely well-known path of /favicon.png instead. Browsers will ~always have /favicon.png cached already, so it will display quickly. If they don't, they'll only make one request for all usages of it and subsequently cache it. Furthermore, each data: URI is slightly over 11 KB. Some pages only have a few occurrences, but /sars-cov-2 has 14, for example, /influenza has 144 (over 1.5 MB), and /pathogens has 361 (nearly 4 MB).
arodzh-sudo · Nov 19, 2021 · 02666e7 · 02666e7
1 parent a71cf22
commit 02666e7
Show file tree

Hide file tree

Showing 5 changed files with 5 additions and 6 deletions.
diff --git a/static-site/src/html.jsx b/static-site/src/html.jsx
@@ -2,7 +2,6 @@
 /* eslint import/extensions:"off" */
 /* eslint global-require:"off" */
 import React from "react";
-import favicon from "../static/favicon.png";
 
 // eslint-disable-next-line react/prefer-stateless-function
 export default class HTML extends React.Component {
@@ -17,7 +16,7 @@ export default class HTML extends React.Component {
             content="width=device-width, initial-scale=1.0"
           />
           {this.props.headComponents}
-          <link rel="shortcut icon" href={favicon} />
+          <link rel="shortcut icon" href="/favicon.png" />
         </head>
         <body>
           <div

diff --git a/static-site/src/sections/influenza-page.jsx b/static-site/src/sections/influenza-page.jsx
@@ -15,7 +15,7 @@ import { ErrorBanner } from "../components/splash/errorMessages";
 import Cards from "../components/Cards/index";
 import fluCards from "../components/Cards/fluCards";
 
-const nextstrainLogoPNG = require("../../static/favicon.png");
+const nextstrainLogoPNG = "/favicon.png";
 
 const title = "Influenza resources";
 const abstract = `The Nextstrain team maintains datasets and other tools for analyzing a variety of influenza viruses.

diff --git a/static-site/src/sections/pathogens.jsx b/static-site/src/sections/pathogens.jsx
@@ -13,7 +13,7 @@ import Cards from "../components/Cards/index";
 import pathogenCards from "../components/Cards/pathogenCards";
 import { AnchorLink } from "../components/Datasets/pathogen-page-introduction";
 
-const nextstrainLogoPNG = require("../../static/favicon.png");
+const nextstrainLogoPNG = "/favicon.png";
 
 const title = "Nextstrain-maintained pathogen analyses";
 const abstract = (

diff --git a/static-site/src/sections/sars-cov-2-page.jsx b/static-site/src/sections/sars-cov-2-page.jsx
@@ -18,7 +18,7 @@ import sarscov2Catalogue from "../../content/SARS-CoV-2-Datasets.yaml";
 import GenericPage from "../layouts/generic-page";
 import { ErrorBanner } from "../components/splash/errorMessages";
 
-const nextstrainLogoPNG = require("../../static/favicon.png");
+const nextstrainLogoPNG = "/favicon.png";
 
 
 const title = "Nextstrain SARS-CoV-2 resources";

diff --git a/static-site/src/sections/staging-page.jsx b/static-site/src/sections/staging-page.jsx
@@ -10,7 +10,7 @@ import { fetchAndParseJSON } from "../util/datasetsHelpers";
 import GenericPage from "../layouts/generic-page";
 import { ErrorBanner } from "../components/splash/errorMessages";
 
-const nextstrainLogoPNG = require("../../static/favicon.png");
+const nextstrainLogoPNG = "/favicon.png";
 
 const title = "Staging Data";
 const abstract = (