My website favicon appears on desktop browsers and mobile browsers for both my app's homepage (XXX.com) and subpages (e.g., XXX.com/FAQ). However, when I send a link to the website over iMessage the favicon only appears for the homepage and not the subpages. When you click the link the favicon will then appear again on the mobile browser (so just doesnt appear in the preview in iMessage). Does anybody have any idea why this is the case? I've looked around Stackoverflow and asked ChatGPT to no avail.
I used https://realfavicongenerator.net/ to generate the favicon images and check that it's working.
Here is my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#F6623E">
<meta name="msapplication-TileColor" content="#F6623E">
<meta name="theme-color" content="#ffffff">
<!-- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>XXX</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
All the referenced favicon files are located directly in the public folder. Would really appreciate anyone's help! Been stuck on this for a few days.