Javascript 无法使用nuxt.js应用程序在书签中显示apple touch图标

我有一个网站。我还有苹果设备的

苹果触摸图标.png

。我的图标是：

• 180x180 PNG图像，无透明度
• 位于网站的根目录（可通过

  /apple touch icon.png

  ）获得）

不久前，我将我的网站从vanilla Vue切换到nuxt.js进行服务器端渲染（SSR）。现在，我的apple touch图标不显示在书签中（仅作为web应用程序显示在主屏幕上）

我花了很多时间来寻找错误。我试图：

• 更改图标位置和名称
• 将图标更改为另一个图像
• 添加更多具有

  大小属性的apple touch图标
  为其他图标、图标添加更多尺寸
  通过在线favicon Checker检查图标（他们向我报告一切正常）
  使用
  numxt.config.js操作：更改选项顺序，添加
  build.extractCSS:true
  属性（我试图找到我的网站和使用numxt.js的其他网站之间的差异）
  在iPhone8和iPhoneSE以及iOS13上进行了检查。在iPad上安装iOS 12
  

但我无法在书签中获得apple touch图标。 昨天我发现这个网站有类似的问题：

（水疗版）

这两个网站是相似的。但是#1做水疗#2与我的网站类似

而且#1在我试图将其保存到书签（）时，会有一个图标#2没有图标（）。我不明白为什么

我的问题：如何在书签中显示apple touch图标？

---

另外，我总是在设置中使用“清除历史记录和数据”。并且总是尝试多次重复添加

nuxt.js版本是2.11.0

apple touch图标添加到

numxt.config.js

到

head.link

：

{ rel: 'apple-touch-icon', href: '/apple-touch-icon.png' }

我还使用了

@nuxtjs/pwa@3.0.0-0，但我在
numxt.config.js
中禁用了favicon属性以使用自定义favicon:
pwa.meta.favicon:false
我是Masumi。
我刚刚修复了这个错误，所以我将分享我的提示

1。编辑图标路径至
/static/apple touch icon.png

（此外，我的文件的尺寸是
512 × 512px
）

2。编辑您的
numxt.config.js
文件的头代码，如下所示。

 head: {
    titleTemplate: '%s',
    title: 'Info move.',
    meta: [
      // [Things you are currently setting]
      {
        name: 'apple-mobile-web-app-capable',
        content: 'yes'
      },
      {
        name: 'apple-mobile-web-app-status-bar-style',
        content: 'black-translucent'
      },
    ],
    link: [
      // [Things you are currently setting]
      {
        rel: 'apple-touch-icon',
        type: 'image/png',
        href: 'https://www.sample.com/apple-touch-icon.png' // [your-domain]
      }
    ]
  },

3。卸载
@nuxtjs/pwa
并删除相关代码。

如果仍然无法解决此问题，可以通过卸载软件包来解决（
npm uninstall@nuxtjs/pwa
）。如果卸载PWA软件包，则需要删除相关代码，如
模块中的代码

这个答案可能不适合您的解决方案，但如果对您有帮助，我会非常高兴：）
谢谢您的回答，但我已经尝试了所有这些，对我没有帮助