Adding IOS Icons For Bookmarked SMF forum

in Tutorials on 19 Jun 2013

Apple introduced a new meta tag named apple-touch-icon, you can now display website icons on the iOS homescreen when you bookmark a site.

Our icon, by default, is 200x200px. But, with iPad and Retina devices, we need to provide more sizes. iPad requires icons with the size of 72x72px, while Retina devices need icons with 114x114px size.

So, all in all, we need to provide the icon in the following specifications ? within the <head> ? to support iPhone, iPad and Retina devices.

Simply create your icon just like you did for your favicon and load it in the root directory. Then add the following code in:

Open Themes/your-theme/index.template.php
    // The ?fin20 part of this link is just here to make sure browsers don't cache it wrongly.
    echo '

Add after:
<link rel="apple-touch-icon" href="/icon.png"/> 
<link rel="apple-touch-icon" sizes="72x72" href="icon.png"/> 
<link rel="apple-touch-icon" sizes="114x114" href="/icon.png"/>

By default, iOS will automatically add the eye-candy effects to the icons.

PixelfyStudio Team
Mick is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs and started tinkering with SMF in 2006 where he created several SMF forums of his own before he founded PixelfyStudio in 2009 to which he is dedicated full time. |


That is an interesting way to accomplish it. I had some flashbacks to a couple or so years ago that you can simply put your icon in the root of your website named:
And make it be 57by57:

Looks like your methodology is more comprehensive, eh? Nice.

Awesome Support. Download our themes, you also get theme support.