When adding my Angular web app to the home screen on iOS Safari, the icon appears as a screenshot instead of the specified apple-touch-icon

Despite adding an apple-touch-icon link to my index.html with a 150x150 PNG image, when I try to add my Angular web app as a shortcut to my iOS home screen from Safari, it only appears as a screenshot of the app page. Below is my HTML code:

<!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,700&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>
htmlcssiosangular

Answer №1

After doing some investigation, I realized that the issue was caused by the src attribute in the line below.

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

I made a change to the following and it resolved the issue:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the correct way to wrap an http.get in TypeScript?

My understanding of Typescript is limited, so I have a basic question related to my web application's frontend. In most http get-requests, I need to include two parameters. To simplify this process, I created a simple wrapper for HttpClient (from "ang ...

angulartypescriptangular-httpclientangular12

Creating Custom Styles with Polymer for <content> Elements

Seeking help with styling using the ::content selector and custom CSS properties. Any insight would be appreciated! To simplify, I have a Polymer component utilizing a content tag that will always contain a paper-input: <template> <style> ...

csspolymershadow-dom

What is causing columns.render not to trigger when DataTable().draw() is invoked?

I'm wondering why the columns.render method is not part of the execution flow when using DataTable().draw(). For instance: HTML <table id="data"> <thead> <tr> <th>TimeColumn</th> < ...

jqueryhtmldatatables

Function in head not triggering on OnMouseOver event

My goal is to have specific text display on my page when a user hovers over an image, with the text changing for each image. Below is the code snippet for the header section: <head> <title>Indian Spices Page</title> <link rel="s ...

javascripthtmlfunction

Adjust the size of the div to fit its content while maintaining the transition animation

I am aiming for the DIV height to automatically adjust to the text within it, while also maintaining a minimum height. However, when the user hovers their mouse over the DIV, I want the height to change smoothly without losing the transition effect. When ...

javascripthtmlcss

What is the best way to incorporate a floating label into an input field?

My goal is to create a form where the label of the input field moves up when the user starts typing, and stays up if they enter any text. However, if the user leaves the input area blank, the label should revert back to its original position. I have tried ...

htmlcss

Tweaking the placement of the dropdown menu in the subnavigation area

Just getting back into coding after a long hiatus - I've dabbled in the past but it's been about 6 years since I've worked with any code. Currently, I'm working on replicating a website for practice. I have created a nav bar and a drop ...

htmlcssmenudropdownstyling

Is it possible to increase the delay in the nth-child selector?

I'm attempting to create a compact checklist that displays in a single row with items appearing sequentially. To achieve this, I utilized the :nth-child() selector in CSS as shown below: .animated { -webkit-animation-duration: 0.8s; animation-d ...

htmlcsscss-selectors

Angular progressive web applications (PWAs) continuously fluctuating in their stability,

I have encountered a problem with my Angular application where it never reaches a stable state, as indicated by ApplicationRef.isStable only emitting false once. The Angular docs mention that: the application will never be stable if you start any kind o ...

angularprogressive-web-appsservice-workerangular-service-workerangular-pwa

Firebase data causing issues with ion-gesture recognition?

Hey there! I'm currently facing an issue with my ionic app. I added the ion-gesture to my project, but due to the ngFor loop pulling data from Firebase, the cards are unable to move. Here's a snippet of my code: <ion-card *ngFor="let po ...

angulartypescriptfirebaseionic-framework

Creating Flexible Designs - Implementing a responsive sidebar with dynamic scrolling

I am in the process of developing a simple web application that features a sidebar whose vertical size is dependent on the number of elements it contains. My goal is to make the web app responsive, ensuring it works well on devices of any size. In cases ...

htmlcssflexboxheightoverflow

Steps to modify the CSS of a custom component in Angular 8

I have been attempting to override the css of a custom component selector, however, my attempts have been unsuccessful. I have tried using ":ng-deep" but it hasn't worked. How can I go about finding a solution for this issue? app.component.html: < ...

csstypescriptangular7angular8

Modify th:hover in CSS to alter the background color

I currently have a table structured as follows: <table class="cedvel"> <caption> count: <%:Html.Encode(TempData["RowsCount"])%></caption> <thead> <tr&g ...

css

Press the designated button located within a table's td element to retrieve the values of adjacent td elements

I need to implement a functionality where clicking a button within a <td> element will retrieve the values of other <td> elements within the same row (<tr>). Here is the current implementation: $(document).ready(function(){ ...

javascriptjqueryhtml

Pentagon Silhouette as Header Background

I am looking to add a unique pentagon shape to my page header background without editing the HTML. I am using SASS for styling purposes. Is there a way to achieve a design similar to this wireframe image of a pentagon with the middle point at the bottom, ...

htmlcsssass

Stopping the page from scrolling back to the top when an asynchronous update occurs in Angular

Once the asynchronous request is complete, I dynamically add a new element to the top with this code snippet: Array.prototype.unshift.apply(scope.conversation, conversation.data.message); The issue arises when the added element causes the scroll position ...

javascriptjqueryhtmlangularjs

Creating multiple versions of a website based on the user's location can be achieved by implementing geotargeting techniques

It may be a bit challenging to convey this idea clearly. I am interested in creating distinct home pages based on the source from which visitors arrive. For instance, if they come from FaceBook, I envision a tailored home page for FaceBook users. If they ...

javascripthtmlcssfacebook

Move from right to left on the slide?

Is there a way to toggle a div's visibility between collapsed and expanded, transitioning smoothly from right to left? I've noticed that most examples I come across demonstrate the transition from left to right. ...

jqueryhtmlcssjquery-uiposition

Angular 6 issue: Data not found in MatTableDataSource

Working on implementing the MatTableDataSource to utilize the full functionality of the Material Data-Table, but encountering issues. Data is fetched from an API, stored in an object, and then used to create a new MatTableDataSource. However, no data is b ...

angulartypescriptangular-material2

Using Angular and Okta together can bring a seamless experience for your users. Learn how to properly use the redirect

I have integrated Okta for user authentication in my Angular 13 application. I followed the guidelines provided by Okta to utilize their SDK, but I am facing issues defining the redirectionUrl with the HashLocationStrategy. Upon logging in, I encounter a ...

angularokta