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
- Deploy the current site to
errors.deessejs.com.
- In a Chrome tab, open the site — favicon shows correctly in the tab.
- Search on Google for the exact brand term or query something that returns the site. The Knowledge Panel / site favicon shows the generic globe.
- Run
curl -I https://errors.deessejs.com/favicon.ico — returns 404 Not Found.
- 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)
-
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.
-
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
},
};
-
(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.
Bug Description
The favicon displays correctly in browser tabs (Chrome, Firefox, Safari all resolve
/icon.svgautomatically 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.svgis the only favicon asset. Next serves it at/icon.svgand the browser picks it up — that is why the tab works.favicon.icoat the root and nometadata.iconsdeclaration in the root layout. Google's favicon crawler (and Bing, DuckDuckGo, Twitter, Slack unfurlers, etc.) request/favicon.icodirectly and fall back to a generic default when it's missing. They do not pick up/icon.svgfrom the static file system the same way browsers do.Steps to Reproduce
errors.deessejs.com.curl -I https://errors.deessejs.com/favicon.ico— returns404 Not Found.https://errors.deessejs.com— the preview shows no site icon, just the default.Expected Behavior
curl -I https://errors.deessejs.com/favicon.icoreturns200 OKwithContent-Type: image/x-icon(orimage/vnd.microsoft.icon)..icois available as a fallback.Actual Behavior
/favicon.icoreturns 404.Environment
Suggested Fix (for implementer reference)
Generate a multi-resolution
.icofrom the existingapps/web/src/app/icon.svg(16, 32, 48 px) using ImageMagick orsharp. Save asapps/web/src/app/favicon.ico. Next.js will serve it at/favicon.icoautomatically.Declare icons in the root metadata (
apps/web/src/app/layout.tsx):(Optional, low-priority) Verify that the
Organization.logoin the root JSON-LD still points at/icon.svg. Google Knowledge Panel may eventually swap to/favicon.icoafter indexing; either is acceptable. No code change needed unless the icon visual differs significantly between SVG and ICO.Notes
.changeset/*.mdrequired (apps/web does not publish).docs/internal/tasks/v1.4.x-seo-cleanup.md.