[Tutorial] Apple Touch Icon: how does it work?

by **Shadow** on May 29th 2015, 4:06 pm

Apple Touch Icon: how does it work?

This tutorial helps to create some personalized icons on your Iphone or Ipad home

What is it?

This technology is called “Apple Touch Icon”. It is a HTML code to insert on your forum header, into the tags “head”. Having a customized icon is very good to make your forum unique and more intuitive for your members.

The best icon optimization is 114 x 114px but depends on your mobile version.

Please find more information on Apple website: Edit

References Apple.com

If you have your icon, now you're ready to learn how to insert it on your forum mobile version:

Modifications to make to insert your icon

First, enter your Administrative panel:

Admin panel>> Display>> Templates>> General>> overall_header

You have to add the following code (without any space):

Code:: <link rel="apple-touch-icon-precomposed" href="LINK_ICONA" />

Now, go to your mobile and see how it works:

First, open Safari browser
Insert the link of your forum into the navigation bar
Select the mobile version or classic version:

Click on the central button:

Then, add the icon to the home screen:

If you've added a specific logo, this latter will appear. Otherwise, you'll have a logo by default. You can also rename the service to make Icon Home Screen clearer

Now, you can see the Icon appearing on your mobile background:

We hope you enjoy this tuto Smile

Forumotion