Change favicon

Author: Stigmatoz

src/components/Favicon.vue

@@ -1,6 +1,6 @@
 <template>
-  <img v-if="favIconValid" class="favicon no-favicon" height="22" :src="NO_FAVICON_URL" />
-  <img v-else class="favicon" height="30" :src="favicon" />
+  <img v-if="faviconValid" class="favicon no-favicon" height="22" :src="NO_FAVICON" />
+  <img v-else class="favicon" height="30" :src="faviconUrl" />
 </template>
 
 <script lang="ts">
@@ -11,18 +11,23 @@ export default {
 
 <script lang="ts" setup>
 import { computed } from 'vue';
-import { NO_FAVICON_URL } from '../utils/consts';
+import { NO_FAVICON } from '../utils/consts';
+import { TypeOfUrl } from '../utils/enums';
 
 const props = defineProps<{
-  favicon: string | undefined;
+  url: string | undefined;
+  type: TypeOfUrl;
 }>();
 
-const favIconValid = computed(
+const faviconValid = computed(
   () =>
-    props.favicon == undefined ||
-    props.favicon == '' ||
-    props.favicon.startsWith('chrome://favicon/'),
+    props.url == undefined ||
+    props.url == '' ||
+    props.url.startsWith('chrome://favicon/') ||
+    props.type == TypeOfUrl.Document,
 );
+
+const faviconUrl = computed(() => `https://www.google.com/s2/favicons?domain=${props.url}&sz=64`);
 </script>
 
 <style scoped>

src/components/TabItem.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="tab-item">
-    <Favicon :favicon="item.favicon" />
+    <Favicon :url="item.url" :type="typeOfUrl" />
     <div class="ml-10 flex-grow-2">
       <div class="first-block">
         <div class="w-80">

src/compositions/block-page.ts

@@ -1,6 +1,6 @@
 import Browser from 'webextension-polyfill';
 import { buildBlockQuery } from '../utils/block-page';
-import { NO_FAVICON_URL } from '../utils/consts';
+import { NO_FAVICON } from '../utils/consts';
 
 export async function useBlockPage(
   domain: string,
@@ -11,7 +11,7 @@ export async function useBlockPage(
 ): Promise<void> {
   const favicon =
     favIconUrl == undefined || favIconUrl == '' || favIconUrl.startsWith('chrome://favicon/')
-      ? NO_FAVICON_URL
+      ? NO_FAVICON
       : favIconUrl;
   const blockUrl =
     Browser.runtime.getURL('src/block.html') +

src/utils/consts.ts

@@ -1,2 +1,2 @@
-export const NO_FAVICON_URL =
-  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABJUlEQVR42mKgOogpKJBMTM08kJCS+RXAJ1UbVBRDUWQIRmACWmwEpHxuN8GpkRIdAOuRfehwnQDXe7696C+eJkdvoox+ceEd/7DWFZyUcinO6JNBf3FOP/z+HGXirkX0hzXs8YJbG78ZvHp2dtaP/3E+Owqwcv1aJLDGSl8Ap6kY7JDmcjfK6UklaDvR4iBfy/Zq+19cyCETqF7AdAiilF6RGbYV0hFWOm9dbyYBiu0QIBcK85XLm090guoDGI3AUPiOM3HJrtbhKs8XBvh7k4mO+DkNMWC0CL6saS5D1Q0IERcRrBKdVy729Ti0apaojlEFHvI1k+Q03t6HESOeMUbjILUJCpo0bK8C7DxI9ezFMtibDuiLQY8oDJn/h5yUKctM1AYAkF4mBkXjJukAAAAASUVORK5CYII=';
+export const NO_FAVICON =
+  'data:image/svg+xml,%3Csvg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="%23000000"%3E%3Cg id="SVGRepo_bgCarrier" stroke-width="0"%3E%3C/g%3E%3Cg id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"%3E%3C/g%3E%3Cg id="SVGRepo_iconCarrier"%3E%3Crect x="0" fill="none" width="20" height="20"%3E%3C/rect%3E%3Cg%3E%3Cpath d="M9 0C4.03 0 0 4.03 0 9s4.03 9 9 9 9-4.03 9-9-4.03-9-9-9zm7.5 6.48c-.274.896-.908 1.64-1.75 2.05-.45-1.69-1.658-3.074-3.27-3.75.13-.444.41-.83.79-1.09-.43-.28-1-.42-1.34.07-.53.69 0 1.61.21 2v.14c-.555-.337-.99-.84-1.24-1.44-.966-.03-1.922.208-2.76.69-.087-.565-.032-1.142.16-1.68.733.07 1.453-.23 1.92-.8.46-.52-.13-1.18-.59-1.58h.36c1.36-.01 2.702.335 3.89 1 1.36 1.005 2.194 2.57 2.27 4.26.24 0 .7-.55.91-.92.172.34.32.69.44 1.05zM9 16.84c-2.05-2.08.25-3.75-1-5.24-.92-.85-2.29-.26-3.11-1.23-.282-1.473.267-2.982 1.43-3.93.52-.44 4-1 5.42.22.83.715 1.415 1.674 1.67 2.74.46.035.918-.066 1.32-.29.41 2.98-3.15 6.74-5.73 7.73zM5.15 2.09c.786-.3 1.676-.028 2.16.66-.42.38-.94.63-1.5.72.02-.294.085-.584.19-.86l-.85-.52z"%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E';