diff --git a/src/components/layout/ApplicationBar.js b/src/components/layout/ApplicationBar.js
index 94481a7..bebc5ea 100644
--- a/src/components/layout/ApplicationBar.js
+++ b/src/components/layout/ApplicationBar.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useMemo } from "react";
 import { makeStyles } from "@material-ui/core/styles";
 import {
   Container,
@@ -75,23 +75,20 @@ const ApplicationBar = () => {
     setAnchorEl(null);
   };
 
-  const getFlagsPath = () => {
-    const basePath = "/public/flags";
-    if (process.env.PUBLIC_URL) {
-      return `${process.env.PUBLIC_URL}/${basePath}`;
-    } else {
-      return basePath;
-    }
-  };
+  const routePrefix = useMemo(() => process.env.PUBLIC_URL ?? "", [
+    process.env.PUBLIC_URL
+  ]);
+
+  const flagsPath = useMemo(() => `${routePrefix}/public/flags`, [routePrefix]);
 
   return (
     <div className={classes.root}>
       <AppBar position="static">
         <Toolbar>
           <div className={classes.logo}>
-            <a href="/" className={classes.miniLogo}>
+            <a href={`${routePrefix}/`} className={classes.miniLogo}>
               <img
-                src={`${process.env.PUBLIC_URL ?? ""}/favicon.ico`}
+                src={`${routePrefix}/favicon.ico`}
                 alt="logo"
                 className={classes.img}
               />
@@ -118,7 +115,7 @@ const ApplicationBar = () => {
                   format="png"
                   pngSize={32}
                   shiny={true}
-                  basePath={getFlagsPath()}
+                  basePath={flagsPath}
                   alt={flag.alt}
                 />
               )}