2

I have the following code in the head section of the code for the webpage:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

and a 180px by 180px .png on the site at the implied address and with the right name.

The favicon shows up fine when I put it on my iOS (16.5.1) home screen, but not when I try to put it on the favourites screen. How can I achieve the latter?

ETA: the method described here worked to get the right image on the home screen, but it hasn't changed the image on the favourites screen or in the bookmarks from the generic icon showing the first letter of the site's name.

1 Answer 1

0

I wonder if you just have old cached images and need to test on a new device that has never seen the current web page:

This post from SO has a way to force the web page to see a new URL for the favorite icon. Another developer says to skip entirely the link / HTML and just put the icon at the root of your web server, since if you can abide by the largest icon size, iOS and iPadOS and macOS will all downsize as needed the image:

Lastly, have you experimented with apple-touch-startup-image for your Web Clip usage?


Once you're 100% sure a brand new / erased device seeing your page for the first time isn't saving the favorite icon correctly, perhaps for Safari 15 you'll want to review the WWDC presentation and focus on making sure the tab bar takes your web site's colors as well as setting the Pinned Tab Icon properly.

Providing the Vector Image

Use 100% black for all vectors with a transparent background in SVG format and add the following markup to all webpages that the icon should represent (replacing "website_icon" with your own file's name).

<link rel="mask-icon" href="website_icon.svg" color="red">

Important: The SVG file must be a single layer and the viewBox attribute must be set to "0 0 16 16".

Then review your Webpage Icon for Web Clip

I would suggest making icons at all the sizes even though you’re doing the largest of 180 X 180

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png">

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .