I have built a website using Next.js App Router with an admin panel.
In the admin panel, I allow the admin to upload a favicon. The favicon is saved in the database as a Base64 string, and I use this Base64 value directly in my code to render the favicon. The favicon works correctly in the browser (it loads fine in the tab).
However, the problem is that the favicon does not appear in Google search results.
I understand that Google expects a static, publicly accessible favicon file, but in my case:
- I cannot save files directly at runtime because Next.js build output is static.
- The favicon is coming dynamically from the database after build time.
- Using Base64 works for the browser but not for Google Search.
My questions:
Does Google support Base64 favicons?
- Is there a recommended way to serve a dynamic favicon in Next.js App Router that will also be recognized by Google?
- Should I expose an API route (e.g. /api/favicon) that returns the favicon as an image?
- Or is it mandatory to store the favicon as a physical file in the public directory for SEO purposes?