#ios #angular #safari #icons #favicon
Вопрос:
Я создаю угловой СПА-PWA, и у меня проблема с вкладкой Safari iOS, потому что она не меняется с углового фавикона, но в Android и ПК это так.
Я пытался сделать то же самое, что и документация safari, подобная этой, в моем 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/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,500amp;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>
Включая значки в манифесте.файл веб-манифеста:
{
"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"
}
]
}
И удаление фавикона.файл ico.
Перед всеми развертываниями я удалил кэш safari.
Но это продолжается без изменений:
https://i.stack.imgur.com/nvN00.jpg
Не могли бы вы мне помочь? пожалуйста.
Спасибо.
Ответ №1:
Я достиг, чтобы отобразить значок вкладки в Mac OS Safari, iOS Chrome и iOS Firefox, но не в iOS Safari, угловой значок остается в нем.
Это сейчас 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,500amp;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>
Кто-нибудь может сказать мне, почему значок вкладки Safari в iOS не меняется?
Большое спасибо.
С уважением.