Recently I discovered that my website's favicon was not displaying on Bing, like this:

The problem lies here:

The specific reason is: there's a serious "definition conflict" in the code. Although modern browsers can make the favicon "barely" display thanks to their powerful error tolerance mechanisms, search engine crawlers like Bingbot cannot correctly identify it. The actual image used is JPG, but the type attribute is declared as image/svg+xml, causing a format mismatch.

The solution is simply to modify this file in the source code: src/app/(app)/layout.tsx

Originally it was all image/svg+xml, you just need to change it to your current favicon format. You can search for the specific format to use.

Previously href= was the variable themeConfig.config.site.favicon, which is the image URL variable filled in the backend cloud function. For convenience, I just hardcoded it (

Then I added apple-touch-icon myself to improve compatibility, size 180px*180px is sufficient.

Finally, search for it on Bing yourself and the favicon will be restored.