别着急,坐和放宽
近期我发现我的网站在bing上是不显示图标的,类似于这种:

问题就出现在这里:

具体原因在于:代码中存在严重的“定义冲突”。虽然现代浏览器凭借强大的容错机制能让图标“勉强”显示,但 Bingbot 等搜索引擎爬虫却无法正确识别。实际使用的是 JPG 图片,却将 type 属性声明为 image/svg+xml,导致格式不匹配
解决方法就是只需要到源代码里修改这个文件 src/app/(app)/layout.tsx
<link
rel="icon"
href="https://xxxxx/favicon.png"
type="image/png"
sizes="144x144"
media="(prefers-color-scheme: dark)"
/>
<link
rel="icon"
href="https://xxxxx/favicon.png"
type="image/png"
sizes="144x144"
media="(prefers-color-scheme: light)"
/>
<link
rel="apple-touch-icon"
href="https://xxxxx/apple-icon.png"
/>
<link
rel="shortcut icon"
href="https://xxxxx/favicon.ico"
type="image/x-icon"
/>
原本这里面都是 image/svg+xml 只需要修改成你当前使用的图标格式就好了,具体修改成什么可以自己搜一下
之前 href= 是变量 themeConfig.config.site.favicon ,就是在后台云函数填的图片地址变量,我这边为了方便直接写死(
然后我自己添加了 apple-touch-icon ,提高兼容性,大小180px*180px即可
最后去bing自搜一下图标就恢复了
