update

_locales/en/messages.json

@@ -505,6 +505,9 @@
     "permission_onedrive_cannot_revoke": {
         "message": "You must disable OneDrive backup first."
     },
+    "permission_favicon": {
+        "message": "Allows fetching website icons."
+    },
     "permission_unknown_permission": {
         "message": "Unknown permission. If see this message, please send a bug report."
     }

sass/popup.scss

@@ -212,13 +212,6 @@ svg {
     display: none;
   }
 
-  .issuerFavicon {
-    vertical-align: bottom;
-    margin-right: 5px;
-    height: 14px;
-    width: 14px;
-  }
-
   &:hover {
     padding-right: 0;
     overflow-y: scroll;
@@ -318,12 +311,23 @@ svg {
 
   .issuer {
     font-size: 12px;
+    line-height: 16px;
+    height: 16px;
     @include themify($themes) {
       color: themed("black-1");
     }
     width: 80%;
     text-overflow: ellipsis;
     overflow: hidden;
+
+    .issuerFavicon {
+      vertical-align: bottom;
+      margin-right: 5px;
+      height: 16px;
+      width: 16px;
+      border-radius: 3px;
+      border: 1px solid transparent;
+    }
   }
 
   .code {
@@ -1075,6 +1079,11 @@ svg {
     color: #ccc;
   }
 
+  .issuerFavicon {
+    background: white;
+    border: 1px solid white !important;
+  }
+
   ::-webkit-scrollbar {
     background: #1e1e1e !important;
   }
@@ -1207,6 +1216,11 @@ svg {
       }
     }
 
+    .issuerFavicon {
+      background: white;
+      border: 1px solid white !important;
+    }
+
     .showqr,
     .pin {
       svg {

src/components/Popup/EntryComponent.vue

@@ -41,13 +41,13 @@
     <div class="issuer">
       <img
         class="issuerFavicon"
-        v-if="shouldShowFavicon() && entry.issuer.split('::')[1]"
+        v-if="shouldShowFavicon && entry.issuer.split('::')[1]"
         v-bind:src="getFaviconUrl(entry.issuer.split('::')[1])"
       /><IconMedal
         class="issuerFavicon"
-        v-if="shouldShowFavicon() && !entry.issuer.split('::')[1]"
+        v-if="shouldShowFavicon && !entry.issuer.split('::')[1]"
       />
-      {{ 
+      {{
         entry.issuer.split("::")[0] +
         (theme === "compact" ? ` (${entry.account})` : "")
       }}
@@ -98,6 +98,7 @@ import { mapState } from "vuex";
 import * as QRGen from "qrcode-generator";
 import { OTPEntry, OTPType, CodeState, OTPAlgorithm } from "../../models/otp";
 import { EntryStorage } from "../../models/storage";
+import { isFirefox, isSafari } from "../../browser";
 
 import IconMinusCircle from "../../../svg/minus-circle.svg";
 import IconRedo from "../../../svg/redo.svg";
@@ -118,7 +119,10 @@ const computedPrototype = [
   mapState("menu", ["theme"]),
 ];
 
-let computed = {};
+let computed: {} = {
+  shouldShowFavicon:
+    !isFirefox && !isSafari && mapState("menu", ["showFavicon"]).showFavicon,
+};
 
 for (const module of computedPrototype) {
   Object.assign(computed, module);
@@ -146,12 +150,6 @@ export default Vue.extend({
         entry.type !== OTPType.steam
       );
     },
-    shouldShowFavicon() {
-      return (
-        navigator.userAgent.indexOf("Firefox") === -1 &&
-        this.$store.state.menu.showFavicon
-      );
-    },
     getFaviconUrl(u: string) {
       //  TODO: Switch to commented out implementation when MV3
       // const url = new URL(chrome.runtime.getURL("/_favicon/"));

src/store/Permissions.ts

@@ -130,6 +130,16 @@ const permissions: Permission[] = [
       },
     ],
   },
+  {
+    id: "favicon",
+    description: chrome.i18n.getMessage("permission_favicon"),
+    revocable: true,
+  },
+  {
+    id: "chrome://favicon/*",
+    description: chrome.i18n.getMessage("permission_favicon"),
+    revocable: true,
+  },
 ];
 
 export class Permissions implements Module {