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
Find:
// 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.




idesignSMF Team
Mick is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs idesignSMF.com 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.

idesignSMF.com | SimpleMachines.org



1 Comments

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:
apple-touch-icon.png
And make it be 57by57:
https://www.choppix.com/apple-touch-icon.png


Looks like your methodology is more comprehensive, eh? Nice.
:happy:
#1

rocket_launch

Free Forever. Our themes will always be free. Forever. Period.