I've been doing some research on getting a webapp I am working on to display the proper icon / tiles in the correct situation. We have a version of our logo as an .ICO on transparent that we have been using for the icon shown in the browsers tab. No borders from a background, just the logo against the gray of the tab. Now we want users to be able to add a home screen link to our app. This link's icon should be the logo against a gray background.
For apple this is easy:
<link rel="apple-touch-icon" href="css/touch-icon-iphone.png" />
plus any additional sizes we want to add. The apple-touch prefix makes having a separate file easy.
However, Android is presenting an issue. Currently Android will accept the apple touch icon, but this listed as depreciated and will not work soon. (https://developer.chrome.com/multidevice/android/installtohomescreen#icon) The meta tag given for adding icons to be used for Android (Chrome is the only concern) is listed as:
<link rel="icon" sizes="192x192" href="icon-name-192.png">
<link rel="icon" sizes="128x128" href="icon-name-128.png">
This will apparently overwrite the favicon when the browser sees it. Which means that if I give these images the wanted gray background, then the icons in my browser tabs will show the gray square. And if these are on transparent then when I add to desktop on ANdroid I get the icons without the gray square.
Am I missing something? This seems like a pretty common request, and yet I cant find a solution. I tried looking at the meta data for other sites where the favicon appears to be on transparency but the desktop version shows on gray / another color, but I dont see any extra tags, and so I assume they are using the apple touch version, which as stated is apprently still legal as of now.
Whats the accepted way to deal with this issue?
rel="shortcut icon" is probably what you are looking for