我有一个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会找到它，但这不起作用，因为我们需要大约十几个不同的可能图标。
有人可以建议如何做到这一点吗？