Favicon and Open Graph debugging for a polished product launch
The tiny assets that shape trust in search results, chat previews, browser tabs, and directory listings—and how to test their actual HTTP responses.
Favicon is an HTTP contract
The link element is only a pointer. The target must be reachable, return an image content type, and contain a format the browser can decode. Keep an ICO or PNG fallback for broad compatibility; do not rely on a path that works only in your dev server.
Open Graph must describe the same page
Use an absolute HTTPS image URL, a useful 1200×630 preview, and copy that matches the visible title and description. If a proxy or CDN caches an old image, version the asset URL when the design changes.
- og:url is the canonical public URL.
- og:image is absolute and returns 200 with an image MIME type.
- Twitter card metadata has a sensible fallback.
- The preview remains legible without relying on hover or animation.
Why is my favicon not showing?
| Symptom | Inspect | Correction |
|---|---|---|
| Icon link returns 404 | Resolved href, base URL, and deployed asset | Correct the asset path and ship the file |
| 200 response contains HTML | Catch-all rewrite or login response | Serve an image at the icon URL |
| Browser shows an older icon | Browser and CDN cache, exact href | Deploy the new asset, refresh caches, and recheck in a fresh session |
| Only a nested route is affected | Relative icon href | Use the correct absolute path or resolve it against the intended base |
| Browser tab works, Google icon absent | Homepage declaration and crawler eligibility | Review Google's favicon requirements separately |
Browser icons and Google Search icons are separate checks
Google reads the favicon declaration on the homepage and requires the homepage and favicon to be crawlable by its relevant crawlers. Use a square icon and a stable URL, then review the current size guidance in the official documentation. Meeting the requirements does not guarantee that Google will show it.
For browser debugging, verify the actual image bytes and the resolved link URL first. Clearing a cache does not repair an incorrect href or an HTML error response. For a Next.js app, also check its icon file convention and avoid assuming every route uses a manually added link.
Ready for a pre-launch audit?
Run the public analyzer and get a prioritised report for the URL you are about to share.
Run the SEO audit