Separate icon for browser tab and 'Add To Desktop'

Question

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?

Answer 1

rel="shortcut icon" is probably what you are looking for