我有一个 HTML 移动网络应用程序，它为多个品牌网站使用单一代码源。每个“站点”都需要有自己的“apple-touch-icon.png”，当站点被添加到主屏幕时会使用它。我可以让它在 iOS 上工作，但不能在 Android 上工作。
我们的项目使用 Angular.JS，所以我尝试直接在 index.html 文件中指定动态路径，例如：
<link rel="apple-touch-icon" sizes="144x144" ng-href="/icons/144/{{bankId | lowercase}}-apple-touch-icon.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" ng-href="/icons/144/{{bankId | lowercase}}-apple-touch-icon.png">
这适用于 iOS，但不适用于 Android。
我还尝试通过 jQuery 附加标签，例如：
$('head').append('<link rel="apple-touch-icon" sizes="144x144" href="/icons/144/'+bankId+'-apple-touch-icon.png">' +
'<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/icons/144/'+bankId+'apple-touch-icon.png">');
这也适用于 iOS，尽管填充图标有明显的延迟。同样，这在 Android 中不起作用。
如果我将 apple-touch-icon.png 留在根文件夹中，Android 确实会找到它，但这不起作用，因为我们需要大约十几个不同的可能图标。
任何人都可以建议如何做到这一点？