CODEWITHSUNDEEP
androidhtmliosweb-applications
archvile
archvile

Reputation: 199

Different web app icons for android and ios

As far as I know there are 2 meta tags that both OSes support, which is:

<link rel="apple-touch-icon" href="#"/>
<link rel="apple-touch-icon-precomposed" href="#"/>

I want to have 2 different icons, one for androids and one for IOS devices. Any way to achieve that other than using complicated mobile detecting scripts? I couldn't manage to find any, but maybe a tag that only one of them supports?

Upvotes: 3

Views: 298

Answers (1)

RoyB
RoyB

Reputation: 3164

This has to be done serversided.

Theres different solutions, you can replace your snippet with one of these. If you use PHP, you have to change the file extention of your html file to .php

SSI

If your server supports SSI (ServerSide Includes) you can do this:

<!--#if expr="$HTTP_USER_AGENT=/Android/" -->
<!--
<link rel="apple-touch-icon" href="androidimg"/>
<link rel="apple-touch-icon-precomposed" href="androidimg"/>
-->
<!--#else -->
<!--
<link rel="apple-touch-icon" href="altimg"/>
<link rel="apple-touch-icon-precomposed" href="altimg"/>
-->
<!--#endif -->

PHP

If you use PHP

<?
$ua = $_SERVER['HTTP_USER_AGENT'];
if (preg_match(/'Android'/, $ua) : 
?>
    <link rel="apple-touch-icon" href="androidimg"/>
    <link rel="apple-touch-icon-precomposed" href="androidimg"/>
<? else: ?>
    <link rel="apple-touch-icon" href="altimg"/>
    <link rel="apple-touch-icon-precomposed" href="altimg"/>
<? endif; ?>

Upvotes: 1

Related Questions