Skip to content

[BUG]: favicon absent from web search / Knowledge Panel #64

Description

@martyy-code

Bug Description

The favicon displays correctly in browser tabs (Chrome, Firefox, Safari all resolve /icon.svg automatically via Next.js), but in web search results, Google Knowledge Panel, and most external link previews, the site shows the default globe icon instead of the branded one.

Root cause:

  • apps/web/src/app/icon.svg is the only favicon asset. Next serves it at /icon.svg and the browser picks it up — that is why the tab works.
  • The site has no favicon.ico at the root and no metadata.icons declaration in the root layout. Google's favicon crawler (and Bing, DuckDuckGo, Twitter, Slack unfurlers, etc.) request /favicon.ico directly and fall back to a generic default when it's missing. They do not pick up /icon.svg from the static file system the same way browsers do.
  • The Google Knowledge Panel also needs an explicit declaration to index the favicon as the site logo.

Steps to Reproduce

  1. Deploy the current site to errors.deessejs.com.
  2. In a Chrome tab, open the site — favicon shows correctly in the tab.
  3. Search on Google for the exact brand term or query something that returns the site. The Knowledge Panel / site favicon shows the generic globe.
  4. Run curl -I https://errors.deessejs.com/favicon.ico — returns 404 Not Found.
  5. Open any external link preview tool (e.g. Twitter Card Validator, opengraph.xyz) targeting https://errors.deessejs.com — the preview shows no site icon, just the default.

Expected Behavior

  • curl -I https://errors.deessejs.com/favicon.ico returns 200 OK with Content-Type: image/x-icon (or image/vnd.microsoft.icon).
  • Google picks up the favicon for site links and the Knowledge Panel within a few weeks of re-crawl.
  • Browser tabs continue to show the SVG (sharper at high DPI), but the legacy .ico is available as a fallback.
  • External link unfurlers (Slack, Twitter, Discord) display the favicon when rendering site previews.

Actual Behavior

  • /favicon.ico returns 404.
  • Google search shows the default globe icon next to site links.
  • Knowledge Panel lacks a brand favicon.
  • External link unfurlers fall back to no icon.

Environment

  • Node.js: 22.x
  • pnpm: 10.x
  • OS: reproducible on any (deployment issue, not environment-bound).

Suggested Fix (for implementer reference)

  1. Generate a multi-resolution .ico from the existing apps/web/src/app/icon.svg (16, 32, 48 px) using ImageMagick or sharp. Save as apps/web/src/app/favicon.ico. Next.js will serve it at /favicon.ico automatically.

  2. Declare icons in the root metadata (apps/web/src/app/layout.tsx):

    export const metadata: Metadata = {
      // ...
      icons: {
        icon: [
          { url: '/icon.svg', type: 'image/svg+xml' },
          { url: '/favicon.ico', sizes: 'any', type: 'image/x-icon' },
        ],
        apple: '/icon.svg', // square crop from icon.svg, or generate apple-touch-icon.png separately
      },
    };
  3. (Optional, low-priority) Verify that the Organization.logo in the root JSON-LD still points at /icon.svg. Google Knowledge Panel may eventually swap to /favicon.ico after indexing; either is acceptable. No code change needed unless the icon visual differs significantly between SVG and ICO.

Notes

  • This is a deployment / SEO hygiene issue, not a code defect — the package and the docs build fine. It only affects how external surfaces (search engines, link unfurlers) display the site.
  • No .changeset/*.md required (apps/web does not publish).
  • This issue slots into the v1.4.x SEO cleanup batch tracked at docs/internal/tasks/v1.4.x-seo-cleanup.md.

Metadata

Metadata

Assignees

No one assigned

    Labels

    effort: xsA few minutesp2: mediumNormal prioritystatus: readyValidated by Tech Lead, ready to pick uptype: bugBug / defect fix

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions