fix: Fix the problem that favicon does not work

src/pages/_document.jsx

@@ -10,9 +10,6 @@ export default function Document() {
         />
         <meta name="apple-mobile-web-app-capable" content="yes" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=4" />
-        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=4" />
-        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=4" />
         <link rel="manifest" href="/site.webmanifest?v=4" />
         <link rel="mask-icon" href="/safari-pinned-tab.svg?v=4" color="#1e9cd7" />
       </Head>

src/pages/index.jsx

@@ -194,9 +194,17 @@ function Home({ initialSettings }) {
         <title>{initialSettings.title || "Homepage"}</title>
         {initialSettings.base && <base href={initialSettings.base} />}
         {initialSettings.favicon ? (
-          <link rel="icon" href={initialSettings.favicon} />
+          <>
+            <link rel="apple-touch-icon" sizes="180x180" href={initialSettings.favicon} />
+            <link rel="icon" href={initialSettings.favicon} />
+          </>
         ) : (
-          <link rel="shortcut icon" href="/homepage.ico" />
+          <>
+            <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=4" />
+            <link rel="shortcut icon" href="/homepage.ico" />
+            <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=4" />
+            <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=4" />
+          </>
         )}
         <meta
           name="msapplication-TileColor"