[Tutorial] Apple Touch Icon: how does it work? Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skinReturn to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

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

    Shadow
    Shadow
    Manager
    Manager


    Male Posts : 16217
    Reputation : 1831
    Language : French, English

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

    Post by Shadow 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