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







Tagged with: icons retina apple IOS 


Mick

Mick G

  idesignsmf.com

    

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

  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.

  Receive our monthly newsletter right in your inbox.
Commitment issues? Unsubscribe at any time.

Get 100% complete access to our entire collection and find out why 11,210 SMF owners prefer our themes



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:
http://www.choppix.com/apple-touch-icon.png


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








  Contribute to the development of SMF. Follow the coding discussions taking place on >> Github