How do I set a icon when someone chooses the "Add to Home Screen" option from Chrome on Android?
PLEASE don't vote to close as a duplicate or repeat an answer seen elsewhere unless you know the answer works NOW in Chrome. I've already tried the solutions here and elsewhere. Things seem to have changed.
I've tried various versions of the below code. I've tried different kinds of files (png, svg, ico), different size files, including only the "apple-touch-icon", using rel="icon", etc.
<link rel="shortcut icon" href="assets/icons/favicon.ico" />
<link rel="apple-touch-icon" href="assets/icons/homescreen-icon.png" />
It works from Firefox.
I have only found one webpage where the designated icon actually gets used as the home screen icon:
https://www.nytimes.com/games/connections/
For all other tested websites (google.com, nytimes.com, allrecipes.com, youtube.com, and more) the icon uses a default gray icon with the first letter of the website. I'd say it was impossible if not for that one webpage.
I've even tried copy-pasting the head of the above working website into my own website, and still, it uses the default letter icon.
Some websites, like facebook.com, have the "install app" instead of the "Add to Home Screen" option. That's a different thing (PWA) and is not what I'm talking about.
Update: a second website that uses the correct icon is businessinsider.com
I had the same problem and tried the same solutions as you, none of them worked (Android phone with Chrome browser).
In my case, I solved it by adding a ".webmanifest" file containing my web icon. For example:
{
"icons": [
{
"src": "/assets/favicon.svg",
"sizes": "any",
"type": "image/svg+xml"
}
]
}
And then you reference it in your HTML file:
<link rel="icon" type="image/svg+xml" href="assets/favicon.svg"> <!-- Desktop browser icon -->
<link rel="manifest" href="assets/site.webmanifest">
As far as I know, this manifest file is required for PWA, but it seems that now it is also required to display standard web shortcut icons? Bug or feature from Chrome?
UPDATE (by original question OP):
I played around with it and discovered that it's enough to specify
{"name": "Myname"}
in the manifest. It doesn't actually need "icons" since it uses the image specified in rel="icon". It doesn't use the info in the manifest file, but something has to be there.
The path in rel="icon" and rel="manifest" don't have to be relative; they can also be absolute paths to wherever those files are found. If it still doesn't work, double-check that the manifest and image files are successfully loaded by the webpage. (You can load the page on a computer and use the browser's "Inspect" > Network)