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

Selection tool for Material UI Fields

Is there a way to design something similar to this layout using Material UI? I'm looking to create a selection between fields. Any advice on how to achieve this in Material UI? ...

cssreactjsmaterial-ui

Establishing the destination for an onclick event to a designated spot

I have divided my body content into two parts. The left side contains a map and buttons, where clicking on a button displays results from Arad.php in another window. How can I target the second half (split right) of my body? <body> <div cla ...

phphtmlonclicktarget

Identifying row expansion in ngx-datatable: detecting expand status on row click

Is there a way to determine if a line has already been expanded when using the toggle feature? When you click on a line, it expands and shows the details. Here is some code in HTML: <ngx-datatable #dataTable ... (select)='onRowSelect($eve ...

angulartypescriptngx-datatable

Reducing size and Assembling JavaScript and CSS

I find myself in a bit of a dilemma when it comes to using just one JS file and one CSS file for a website. Let me elaborate: As someone who mainly works with CMS platforms like Joomla, I often run into issues during page speed tests where experts recomme ...

javascripthtmlcssconcatenationpagespeed

Angular: Excessive mat-menu items causing overflow beyond the page's boundaries

Within my mat-menu, there is a div for each mat-menu item. The number of items varies depending on the data retrieved. However, I noticed that when there are more items than can fit in the menu, it extends beyond the boundaries of the mat-menu instead of ...

cssangularangular-material

Compressing JSON objects for push notification delivery on iOS and Android platforms with PHP

I am sending the push notifications in the chat module using curl for IOS and FCM for android. In which we are sending some of our database entities to enable users to share our in-app content with each other. Scenario: As a third party, I am using pushe ...

phpandroidiosjsoncompression

AngularJS 1 - CSS glitch occurs when navigating between tabs

Upon loading my homepage, it appears as follows: Initially, certain rows were filled with a blue background color using ng-class, specifically "row-answered-call" as shown below: <tr ng-repeat="item in list" ng-class="{'row-answered-call': i ...

javascripthtmlcssangularjs

Display an image with text that appears on hover along with a change in opacity

Is there a way to make the hover effect on an image display with opacity while keeping the text inside unaffected by the opacity style? The image is housed within an input tag, and when clicked, a bootstrap modal will appear with an input form. .img_wra ...

css

Tips for automatically scrolling to the top of a Material2 Angular2 dialog box

I'm currently utilizing the Dialog box feature from https://material.angular.io. Specifically, I am facing an issue where when I try to position the dialog box using: config = {'width':'200px', 'height':'400px' ...

angularangular-material2

How to manually resolve a type by its string or name in Angular 2

I'm facing a challenge. Is it possible to resolve a component manually with just its name known? Let's say I have a string variable that holds the name of a component, like "UserService". I've been exploring Injector and came across method ...

typescriptangularsystemjs

Issue: The formGroup function requires a valid FormGroup instance to be passed in. Data retrieval unsuccessful

My goal is to retrieve user data from a user method service in order to enable users to update their personal information, but I'm encountering an error. Currently, I can only access the "prenom" field, even though all the data is available as seen in ...

angulartypescriptformbuilderformgroups

Exploring the Material Drawer functionality within an Angular application

I'm having trouble integrating the Material Drawer component into my Angular app. Despite following the instructions on https://material.io/develop/web/components/drawers/, it's not rendering properly. Could someone please provide a detailed, s ...

angulartypescriptangular-materialdrawermdc-components

Showcasing a contact from the address book - Developing for iPhone

I have an iPhone app using the AdressBookUI framework and I need help displaying a person. I already have their ABRecordRef, but I'm not sure how to go about displaying them. All I really want to show is their name, picture, and phone numbers. Can so ...

iphoneiosuiviewcontroller

Provide users with the option to select the email they want to use for signing up while utilizing Angular Firebase's Google signup

My implementation involves using Angular with Firebase for sign up with Google. var result = await this.afAuth.auth.signInWithPopup( new auth.GoogleAuthProvider() ); When I visit my website in Google Chrome while logged into multiple Gmail accounts ...

angularfirebasefirebase-authenticationangularfiregoogle-authentication

Troubleshooting the issue with the htmlFor attribute

I have encountered an issue with creating radio buttons and labels using JavaScript. Despite adding the 'for' attribute in the label using 'htmlFor', it does not apply to the actual DOM Element. This results in the label not selecting t ...

javascripthtmlradio-buttonlabel

Putting in Angular's most recent version

While attempting to update to the latest version of angular/cli, I encountered an error: npm install --save-dev @angular/cli@latest npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.2 (node_modules\chokidar\node_modules\fs ...

node.jsangularnpm

What is the best way to trigger an event function again once a specific condition has been satisfied?

I'm currently working on a project where I need a sidebar to scroll at a slower rate until it reaches a specific point, and then stop scrolling once that point is reached. Below is the jQuery code I've been using: $(window).on("scroll", function ...

javascriptjquerycss

Different ways to prevent invalid entries in an input field with type datetime-local

<input type="datetime-local" step="1"> Is there a way to prevent invalid date input? For example, entering a date like "11:11:1111" in the format "mm-dd-yyyy". How can this be addressed using Moment.js? ...

htmlangularmomentjsdatetime-formatangular-moment

What is the best way to use .htaccess to maintain $_POST data while consistently eliminating file extensions?

This morning, as I was working on a website, I decided to tackle the task of removing file extensions. Although I am still learning about .htaccess files and their regex, I came across some code online that I thought would help me achieve my goal. The firs ...

phphtml.htaccess

Customizing the appearance of the file input type using an image in HTML and CSS

Can you provide guidance on utilizing the image below? Is there an alternative approach to using: <input type="file" /> ...

htmlcssimageuploadstyling