Angular SPA PWA - Safari iOS 选项卡图标不会改变

Posted

技术标签:

【中文标题】Angular SPA PWA - Safari iOS 选项卡图标不会改变【英文标题】：Angular SPA PWA - Safari iOS Tab Icon don't change 【发布时间】：2021-07-06 18:21:34 【问题描述】：

我正在创建一个 Angular SPA PWA，但我的 Safari ios 选项卡有问题，因为它不会从 Angular favicon 更改，但在 android 和 Pc 中会发生变化。

我已经尝试在我的 index.html 中像 safari documentation 那样做同样的事情：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Unmatched Pairings</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="assets/icons/icon-72x72.png">
  <link rel="apple-touch-icon" sizes="72x72" href="assets/icons/apple-touch-icon-72x72.png">
  <link rel="apple-touch-icon" sizes="96x96" href="assets/icons/apple-touch-icon-96x96.png">
  <link rel="apple-touch-icon" sizes="128x128" href="assets/icons/apple-touch-icon-128x128.png">
  <link rel="apple-touch-icon" sizes="144x144" href="assets/icons/apple-touch-icon-144x144.png">
  <link rel="apple-touch-icon" sizes="152x152" href="assets/icons/apple-touch-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="192x192" href="assets/icons/apple-touch-icon-192x192.png">
  <link rel="apple-touch-icon" sizes="384x384" href="assets/icons/apple-touch-icon-384x384.png">
  <link rel="apple-touch-icon" sizes="512x512" href="assets/icons/apple-touch-icon-512x512.png">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&amp;display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="assets/css/all.css" rel="stylesheet">
  <link rel="manifest" href="manifest.webmanifest">
  <meta name="theme-color" content="#1976d2">
</head>
<body>
  <app-root></app-root>
  <noscript>Please enable javascript to continue using this application.</noscript>
</body>
<foo>
  <div style="display:flex; flex-direction: column; justify-content:center; margin-bottom: 1rem; align-items: center;">
    <div>Icons from:</div>
    <div><a href="https://www.fontawesome.com" title="Fontawesome" target="_blank">https://www.fontawesome.com</a></div>
    <div><a href="https://www.freepngimg.com" title="Flaticon" target="_blank">https://www.freepngimg.com</a></div>
    <div><a href="https://www.flaticon.com" title="Flaticon" target="_blank">https://www.flaticon.com</a></div>
  </div>  
</foo>
</html>

在 manifest.webmanifest 文件中包含图标：

 
  "name": "Unmatched Pairings",
  "short_name": "Unmatched Pairings",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "./",
  "start_url": "./",
  "icons": [
    
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png",
      "purpose": "maskable any"
    ,
    
      "src": "assets/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png",
      "purpose": "maskable any"
    ,
    
      "src": "assets/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png",
      "purpose": "maskable any"
    ,
    
      "src": "assets/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png",
      "purpose": "maskable any"
    ,
    
      "src": "assets/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png",
      "purpose": "maskable any"
    ,
    
      "src": "assets/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable any"
    ,
    
      "src": "assets/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png",
      "purpose": "maskable any"
    ,
    
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable any"
    ,
    
      "src": "/assets/icons/apple-touch-icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png",
      "purpose": "maskable any"
    ,
    
      "src": "/assets/icons/apple-touch-icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png",
      "purpose": "maskable any"
    ,
    
      "src": "/assets/icons/apple-touch-icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png",
      "purpose": "maskable any"
    ,
    
      "src": "/assets/icons/apple-touch-icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png",
      "purpose": "maskable any"
    ,
    
      "src": "/assets/icons/apple-touch-icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png",
      "purpose": "maskable any"
    ,
    
      "src": "/assets/icons/apple-touch-icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable any"
    ,
    
      "src": "/assets/icons/apple-touch-icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png",
      "purpose": "maskable any"
    ,
    
      "src": "/assets/icons/apple-touch-icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable any"
    
  ]

并删除 favicon.ico 文件。

在所有部署之前，我已经删除了 safari 缓存。

但它继续不变：

https://i.stack.imgur.com/nvN00.jpg

你能帮帮我吗？请。

谢谢。

【问题讨论】：

【参考方案1】：

我已经实现了在 Mac OS Safari、iOS Chrome 和 iOS Firefox 中显示标签图标，但在 iOS Safari 中没有显示，Angular 图标仍保留在其中。

现在是 index.html 代码：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Unmatched Pairings</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/png" sizes="512x512" href="assets/icons/icon-512x512.png">
  <link rel="icon" type="image/png" sizes="384x384" href="assets/icons/icon-384x384.png">
  <link rel="icon" type="image/png" sizes="192x192" href="assets/icons/icon-192x192.png">
  <link rel="icon" type="image/png" sizes="152x152" href="assets/icons/icon-152x152.png">
  <link rel="icon" type="image/png" sizes="144x144" href="assets/icons/icon-144x144.png">
  <link rel="icon" type="image/png" sizes="128x128" href="assets/icons/icon-128x128.png">
  <link rel="icon" type="image/png" sizes="96x96" href="assets/icons/icon-96x96.png">
  <link rel="icon" type="image/png" sizes="72x72" href="assets/icons/icon-72x72.png">
  <link rel="icon" type="image/png" sizes="32x32" href="assets/icons/icon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="assets/icons/icon-16x16.png">
  <link rel="apple-touch-icon" sizes="512x512" href="assets/icons/icon-512x512.png">
  <link rel="apple-touch-icon" sizes="384x384" href="assets/icons/icon-384x384.png">
  <link rel="apple-touch-icon" sizes="192x192" href="assets/icons/icon-192x192.png">
  <link rel="apple-touch-icon" sizes="152x152" href="assets/icons/icon-152x152.png">
  <link rel="apple-touch-icon" sizes="144x144" href="assets/icons/icon-144x144.png">
  <link rel="apple-touch-icon" sizes="128x128" href="assets/icons/icon-128x128.png">
  <link rel="apple-touch-icon" sizes="96x96" href="assets/icons/icon-96x96.png">
  <link rel="apple-touch-icon" sizes="72x72" href="assets/icons/icon-72x72.png">
  <link rel="apple-touch-icon" sizes="32x32" href="assets/icons/icon-32x32.png">
  <link rel="apple-touch-icon" sizes="16x16" href="assets/icons/icon-16x16.png">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&amp;display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="assets/css/all.css" rel="stylesheet">
  <link rel="manifest" href="manifest.webmanifest">
  <meta name="theme-color" content="#1976d2">
</head>
<body>
  <app-root></app-root>
  <noscript>Please enable JavaScript to continue using this application.</noscript>
</body>
<foo>
  <div style="display:flex; flex-direction: column; justify-content:center; margin-bottom: 1rem; align-items: center;">
    <div>Icons from:</div>
    <div><a href="https://www.fontawesome.com" title="Fontawesome" target="_blank">https://www.fontawesome.com</a></div>
    <div><a href="https://www.freepngimg.com" title="Flaticon" target="_blank">https://www.freepngimg.com</a></div>
    <div><a href="https://www.flaticon.com" title="Flaticon" target="_blank">https://www.flaticon.com</a></div>
  </div>  
</foo>
</html>

谁能告诉我为什么 iOS Safari 标签图标不改变？

非常感谢。

问候。

【讨论】：

以上是关于Angular SPA PWA - Safari iOS 选项卡图标不会改变的主要内容，如果未能解决你的问题，请参考以下文章

使用 Angular 在 iPhone 版 Safari 中的语音转文本

PWA：iOS 12 Safari 中的积极缓存

PWA 与 Safari 网站有啥区别？

如何在 Safari iOS13+ 中从 PWA 下载图像

Material UI：底部导航与 iOS 上的 Progressive Web App (PWA) Safari 对齐

PWA 在重定向到其他 URL 时显示 Safari 控件