html - Dynamic "apple-touch-icon" on Android devices? -
i have html mobile web app uses single source of code multiple branded sites. each "site" needs have own "apple-touch-icon.png" used when site bookmarked home screen. can work on ios, not android.
we using angular.js our project, i've tried specifying dynamic paths in index.html file directly, example:
<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"> this works on ios, not on android.
i've tried appending tags via jquery, example:
$('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">'); this works on ios, though there noticeable delay icon populated. again, doesn't work in android.
if leave apple-touch-icon.png in root folder, android find it, won't work need dozen different possible icons.
could suggest how else done?
Comments
Post a Comment