1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.3 Best way to implement Apple touch icons?

Discussion in 'Styling and Customization Questions' started by sforum, Aug 27, 2014.

  1. sforum

    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:

    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. :)
  2. Mike

    Mike XenForo Developer Staff Member

    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).
    sforum likes this.
  3. Steve F

    Steve F Well-Known Member

    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 likes this.
  4. sforum

    sforum Active Member

    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).

  5. HWS

    HWS Well-Known Member

    This is the way to go:

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

    sforum Active Member

    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. o_O
  7. Mr Lucky

    Mr Lucky Well-Known Member

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

Share This Page