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

Go down

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

Post 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 Edit

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

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

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

We hope you enjoy this tuto Smile


Male Posts : 16202
Reputation : 1803
Language : French, English

Back to top Go down

Back to top

Permissions in this forum:
You cannot reply to topics in this forum