XF 1.3 Best way to implement Apple touch icons?

sforum

Active member
I want to make sure that my forum looks as good as possible when people add it to their home screen on their Apple iOS device, so was wondering how XenForo 1.3.5 handles apple-touch-icons?

Current advice on the Internet suggests creating 4 different PNGs as per this table:

Code:
60×60    -    iPhone / iPod
120×120    -    iPhone / iPod Retina
76×76    -    iPad
152×152    -    iPad Retina

One would then add the following to the HTML head:

<link href="http://www.yoursite.com/apple-touch-icon.png" rel="apple-touch-icon" />
<link href="http://www.yoursite.com/apple-touch-icon-76x76.png" rel="apple-touch-icon" sizes="76x76" />
<link href="http://www.yoursite.com/apple-touch-icon-120x120.png" rel="apple-touch-icon" sizes="120x120" />
<link href="http://www.yoursite.com/apple-touch-icon-152x152.png" rel="apple-touch-icon" sizes="152x152" />

Should I be doing this (e.g. adding the above code to PAGE_CONTAINER) for best results? Or if I add a single, high resolution PNG to styles/default/xenforo/logo.og.png is that enough, and XenForo will scale it appropriately depending on the device (e.g. if an iPad Retina user adds it to their home screen, they get a 152x152 icon)?

Thanks. :)
 
I want to make sure that my forum looks as good as possible when people add it to their home screen on their Apple iOS device, so was wondering how XenForo 1.3.5 handles apple-touch-icons?

Current advice on the Internet suggests creating 4 different PNGs as per this table:

Code:
60×60    -    iPhone / iPod
120×120    -    iPhone / iPod Retina
76×76    -    iPad
152×152    -    iPad Retina

One would then add the following to the HTML head:

<link href="http://www.yoursite.com/apple-touch-icon.png" rel="apple-touch-icon" />
<link href="http://www.yoursite.com/apple-touch-icon-76x76.png" rel="apple-touch-icon" sizes="76x76" />
<link href="http://www.yoursite.com/apple-touch-icon-120x120.png" rel="apple-touch-icon" sizes="120x120" />
<link href="http://www.yoursite.com/apple-touch-icon-152x152.png" rel="apple-touch-icon" sizes="152x152" />

Should I be doing this (e.g. adding the above code to PAGE_CONTAINER) for best results? Or if I add a single, high resolution PNG to styles/default/xenforo/logo.og.png is that enough, and XenForo will scale it appropriately depending on the device (e.g. if an iPad Retina user adds it to their home screen, they get a 152x152 icon)?

Thanks. :)

I have been using a 200x200 png for the logo-og and it looks absolutely fine on iPad Air & iPhone5.

Edit: 200x200 is the default XenForo size as well.
 
Hmm. I have added a logo via "Facebook Open Graph Logo", and the path is definitely correct (I have tested it by just copy & pasting it into the address bar, and the logo appears), but when I add my forum to my iPad's home screen it just shows a screenshot of the home page.

Any idea what I might be doing wrong? The logo is a 400 x 400 PNG, and works OK when people are linking to Facebook (i.e. the logo shows up when someone posts a link to my forum on Facebook).

Thanks,
 
Hmm. I have added a logo via "Facebook Open Graph Logo", and the path is definitely correct (I have tested it by just copy & pasting it into the address bar, and the logo appears), but when I add my forum to my iPad's home screen it just shows a screenshot of the home page.

Is Facebook Open Graph Logo and Apple Touch Icon one and the same thing then?
 
Top Bottom