fix: upgrade favicons to 48x48 for Google Search visibility

Google requires favicons to be a multiple of 48px. The previous 32x32 favicon.png was being ignored, causing the generic globe icon in search results. Adds favicon.ico (multi-size), apple-touch-icon, and fixes og:image to use absolute URLs.
2026-08-03 07:46:42 +02:00 · 2026-05-10 21:49:56 +08:00
parent 8aa5d9a5f2
commit caf351209b
8 changed files with 10 additions and 3 deletions
@@ -14,8 +14,12 @@ export default defineConfig({

  head: [
    ["meta", { name: "theme-color", content: "#3b82f6" }],
-    ["link", { rel: "icon", type: "image/png", href: "/favicon.png" }],
+    ["link", { rel: "icon", type: "image/png", sizes: "48x48", href: "/favicon.png" }],
+    ["link", { rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
+    ["link", { rel: "apple-touch-icon", sizes: "180x180", href: "/apple-touch-icon.png" }],
    ["link", { rel: "llms-txt", href: "/llms.txt" }],
+    ["meta", { property: "og:image", content: "https://docs.snapotter.com/logo.png" }],
+    ["meta", { property: "og:url", content: "https://docs.snapotter.com" }],
  ],

  vite: {
@@ -6,12 +6,15 @@
    <title>SnapOtter</title>
    <meta name="description" content="Open-source, self-hosted image processing platform" />
    <meta name="theme-color" content="#3b82f6" />
-    <link rel="icon" type="image/png" href="/favicon.png" />
+    <link rel="icon" type="image/png" sizes="48x48" href="/favicon.png" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="manifest" href="/manifest.json" />
    <meta property="og:title" content="SnapOtter" />
    <meta property="og:description" content="Open-source, self-hosted image processing platform" />
    <meta property="og:type" content="website" />
-    <meta property="og:image" content="/og-image.png" />
+    <meta property="og:url" content="https://snapotter.com" />
+    <meta property="og:image" content="https://snapotter.com/og-image.png" />
  </head>
  <body>
    <div id="root"></div>