【发布时间】：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&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
你能帮帮我吗？请。
谢谢。
【问题讨论】：
标签： ios angular safari icons favicon