Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
what size favicon for mobile devices?
Mobile devices use different size favicons and I’m lost regarding the apple ones.
In the oreilly site it says:
Up to iOS 3.1 (known as iPhone OS at that time), 57×57 pixels was the only available size for the WebClip. Starting with iOS 3.2 for iPad, 72×72 is the icon size we should use if we detect this device. For iOS 4.0 or newer, devices with high DPIs (such as iPhone 4) need an icon size of 114×114 pixels. Otherwise, the device will resize the icon with quality loss.
so we have
- 57×57
- 72×72
- 114×114
and only one code: <link rel="apple-touch-icon" href="iphone_icon.png" />
How can I create native favicons for all apple mobile devices?
Last edited by colak (2010-12-22 07:53:35)
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Re: what size favicon for mobile devices?
Hi Colak
I have nothing to know about ios, but googling give those code:
The code is a php code.
Cheers
Offline
Re: what size favicon for mobile devices?
There was an article detailing some of this and more related info on 24ways just a few days ago: life beyond media queries. In that they show an additional attribute sizes="114x114". I guess that means the following:
<link rel="apple-touch-icon" href="apple-touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-iphone4.png" />BTW, if you’re also tailoring your site to different viewport dimensions, you might also find the recommendations in the less framework interesting.
TXP Builders – finely-crafted code, design and txp
Offline
Re: what size favicon for mobile devices?
Hi Dragondz,
Thanks so according to this and my ignorance with php could the code be
<txp:php>
float version = [[[UIDevice currentDevice] systemVersion] floatValue];
if (version > 3.2)
{
<link rel="apple-touch-icon" href="/mobile/3/iphone_icon.png" />
}
else if (version < 4.2)
{
<link rel="apple-touch-icon" href="/mobile/4/iphone_icon.png" />
}
else if (version > 4.1999)
{
<link rel="apple-touch-icon" href="/mobile/42/iphone_icon.png" />
}</txp:php>
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Re: what size favicon for mobile devices?
jakob… will try your way first.
simpler and cleaner… I guess:)
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Re: what size favicon for mobile devices?
jakob wrote:
<link rel=“apple-touch-icon” href=“apple-touch-icon-iphone.png” />
<link rel=“apple-touch-icon” sizes=“72×72” href=“apple-touch-icon-ipad.png” />
<link rel=“apple-touch-icon” sizes=“114×114” href=“apple-touch-icon-iphone4.png” />
That is the recommended code suggested by Apple
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
Offline
Re: what size favicon for mobile devices?
that’s it!
thank you all soo much!
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Re: what size favicon for mobile devices?
Well… The code does not validate on xhtml but validates in html 5. As my sites are xhtml I scouted the net for some code to make the rel links invisible to non mobile browsers.
would this work or does anyone know of a better method ?
<txp:php>
$iphone = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$android = strpos($_SERVER['HTTP_USER_AGENT'],"Android");
$palmpre = strpos($_SERVER['HTTP_USER_AGENT'],"webOS");
$ipod = strpos($_SERVER['HTTP_USER_AGENT'],"iPod");
$ipad = strpos($_SERVER['HTTP_USER_AGENT'],"iPad");
if(!$iphone && !$android && !$palmpre && !$ipod && !$ipad) {
echo '<link rel="apple-touch-icon" href="/touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/touch-icon-iphone4.png" />';
}
</txp:php>many thanks
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Re: what size favicon for mobile devices?
act_if_mobile does the job
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline