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

Adding IOS Icons For Bookmarked SMF forum

Mick in Tutorials
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
Find:
Code: [Select]
	// The ?fin20 part of this link is just here to make sure browsers don't cache it wrongly.
echo '

Add after:
Code: [Select]
<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 

Share This Post

Mick

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.

    


1 Comments

mashby
Jun 19, 2013
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:
http://www.choppix.com/apple-touch-icon.png


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



Connect with us:


Improve SMF

If you wish to contribute to the development of SMF you can contribute to the coding discussions taking place on Github. You are also welcome to suggest features which you would like to see added to the software in the Feature Requests board.




go up