Excellent Support. By using our themes, you also use our excellent support! Our expert staff is here for you.

Adding IOS Icons For Bookmarked SMF forum

Mick in Tutorials on Jun 19, 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.

Tagged with: icons retina apple IOS 


Mick G



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


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.

Latest Discussions

Join the conversation

Our Most Popular Features