NextJS 13中缺少favicon

pdkcd3nj 于 2023-08-04 发布在其他

关注(0)|答案(1)|浏览(118)

我有一个新的网站（几个星期老），这是出版和使用索引/遵循规则.一切似乎都很好，索引正确，所有SEO属性似乎都正确。..
但是
在谷歌搜索控制台和谷歌的搜索结果中，favicon不见了。我已经正确地放置了webmanifest：

{
    "theme_color": "#007FFF",
    "background_color": "#000000",
    "display": "standalone",
    "scope": "/",
    "start_url": "https://bestdosgames.com",
    "name": "bestDOSgames.com",
    "short_name": "bestDOSgames.com",
    "icons": [
        {
            "src": "/android-icon-36x36.png",
            "sizes": "36x36",
            "type": "image/png",
            "density": "0.75"
        },
        {
            "src": "/android-icon-48x48.png",
            "sizes": "48x48",
            "type": "image/png",
            "density": "1.0"
        },
        {
            "src": "/android-icon-72x72.png",
            "sizes": "72x72",
            "type": "image/png",
            "density": "1.5"
        },
        {
            "src": "/android-icon-96x96.png",
            "sizes": "96x96",
            "type": "image/png",
            "density": "2.0"
        },
        {
            "src": "/android-icon-144x144.png",
            "sizes": "144x144",
            "type": "image/png",
            "density": "3.0"
        },
        {
            "src": "/android-icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png",
            "density": "4.0"
        },
        {
            "src": "/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        },
        {
            "src": "/icon-256x256.png",
            "sizes": "256x256",
            "type": "image/png",
            "density": "4.0"
        },
        {
            "src": "/icon-384x384.png",
            "sizes": "384x384",
            "type": "image/png",
            "density": "4.0"
        },
        {
            "src": "/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png",
            "density": "4.0",
            "purpose": "maskable"
        }
    ]
}

字符串
在Header中，我还有：

<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180"/>
<link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png"/>
<link rel="icon" href="/favicon.ico" type="image/x-icon"/>
<link rel="icon" href="/favicon-16x16.png" sizes="16x16" type="image/png"/>
<link rel="manifest" href="/manifest.webmanifest"/>

型
我错过了什么？网站网址是https://bestdosgames.com，所以你可以看看...
所有图标都是公开的。我用的是Next 13和App文件夹。

next.js

来源：https://stackoverflow.com/questions/76737693/missing-favicon-in-nextjs-13

1条答案

按热度按时间

n8ghc7c11#

你应该把你的favicon文件放在app/目录的顶层。favicon文件应该是.ico类型。
以下是文档的相关摘录：

Use an image file to set an app icon by placing a `favicon`, `icon`, or `apple-icon` image file within your `/app` directory.
The `favicon` image can only be located in the top level of `app/`.

Next.js will evaluate the file and automatically add the appropriate tags to your app's `<head>` element.

| File convention             | Supported file types                    | Valid locations |
| --------------------------- | --------------------------------------- | --------------- |
| [`favicon`](#favicon)       | `.ico`                                  | `app/`          |
| [`icon`](#icon)             | `.ico`, `.jpg`, `.jpeg`, `.png`, `.svg` | `app/**/*`      |
| [`apple-icon`](#apple-icon) | `.jpg`, `.jpeg`, `.png`                 | `app/**/*`      |

字符串

赞(0）回复(0）举报 2023-08-04

我来回答

NextJS 13中缺少favicon

1条答案

相关问题

热门标签

最新问答