fix: reduce webapp icon displayed on browser tab flickering when page is loading (#9212)

web/app/(shareLayout)/layout.tsx

@@ -1,7 +1,12 @@
 import React from 'react'
 import type { FC } from 'react'
+import type { Metadata } from 'next'
 import GA, { GaType } from '@/app/components/base/ga'
 
+export const metadata: Metadata = {
+  icons: 'data:,', // prevent browser from using default favicon
+}
+
 const Layout: FC<{
   children: React.ReactNode
 }> = ({ children }) => {

web/hooks/use-app-favicon.ts

@@ -21,7 +21,7 @@ export function useAppFavicon(options: UseAppFaviconOptions) {
   } = options
 
   useAsyncEffect(async () => {
-    if (!enable)
+    if (!enable || (icon_type === 'image' && !icon_url) || (icon_type === 'emoji' && !icon))
       return
 
     const isValidImageIcon = icon_type === 'image' && icon_url