XF 1.3 Best way to implement Apple touch icons?

[sforum]

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:

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.

 

[Mike]

If you wish to provide different sized icons, you'll need to enter them manually. The default entry that we provide relies on the device scaling as necessary.

There seem to be some comments that one icon is fine (https://mathiasbynens.be/notes/touch-icons).

 

[Steve F]

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:

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.

 

[sforum]

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,

 

[HWS]

This is the way to go:
http://realfavicongenerator.net/

It automatically generates all favicons for you and provides the code to insert and all files to upload automatically and free of charge.

 

[sforum]

This is the way to go:
http://realfavicongenerator.net/

It automatically generates all favicons for you and provides the code to insert and all files to upload automatically and free of charge.

This looks great, I'll check it out, thanks.

I'd still like to know what the "official" method doesn't seem to work for me, though.

 

[Mr Lucky]

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?