[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

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

[Tutorial] Apple Touch Icon: how does it work? 09615110What 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.

[Tutorial] Apple Touch Icon: how does it work? Image-11
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:

[Tutorial] Apple Touch Icon: how does it work? 09615110Modifications 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):

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:

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

  • Click on the central button:


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

  • Then, add the icon to the home screen:


[Tutorial] Apple Touch Icon: how does it work? Add-a-10

  • 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

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

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


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


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

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

We hope you enjoy this tuto Smile

Forumotion
Shadow
Shadow
Administrator
Administrator

Male Posts : 16203
Reputation : 1805
Language : French, English

Back to top Go down

Back to top


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