iOS safari добавить на главный экран значок моего веб-приложения angular в виде скриншота вместо значка apple touch

#html #css #ios #angular

#HTML #css #iOS #angular

Вопрос:

Когда я пытаюсь добавить свое веб-приложение angular в качестве ярлыка на свой домашний экран из своего iOS safari, оно отображается как скриншот страницы моего приложения, хотя я добавил ссылку на значок apple-touch в свой index.html . где мое изображение имеет размер 150 * 150 и формат png. ниже приведен мой HTML-код

 <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Insights</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="src/assets/icons/favicon-32x32.png">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700amp;amp;display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material Icons" rel="stylesheet">
  <link rel="manifest" href="manifest.webmanifest">
  <link rel="apple-touch-icon" href="src/assets/icons/apple-touch-icon-150x150.png">
  <meta name="theme-color" content="#1976d2">
</head>

<body>
  <app-root></app-root>
  <noscript>Please enable JavaScript to continue using this application.</noscript>
</body>

</html>

  

Ответ №1:

После некоторых исследований выяснилось, что у меня плохо с src в строке ниже.

 <link rel="apple-touch-icon" href="src/assets/icons/apple-touch-icon-150x150.png">
  

изменил его на приведенный ниже

 <link rel="apple-touch-icon" href="/assets/icons/apple-touch-icon-150x150.png">