We moved to new unified forum!

Please post all new support queries in our New Forum.

T3 Community Discussion & Support

Let's build the best free Joomla template framework, together!
  1. Lee Tempest
  2. Sherlock Holmes
  3. General Discussion
  4. Wednesday, 04 February 2015
  5.  Subscribe via email
Hello,
When user selects to add the website to their home screen on a mobile device, if it is an apple device then it uses the apple-touch-icon.png file. These icons can then be customised instead of using something from the site, for instance a small version of the company logo etc.

I have created these before on a number of sites and just placed them loose in the template folder.

Is this the correct place when suing the T3 framework? it would be good to have the documentation updated with more explaination fo how and where to store these icons.

Thanks

Lee
Comment
There are no comments made yet.
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Lee,

Sorry but I am not sure I got your point, could you please make it clear. I am using Window so it's great if you can provide a screenshot highlighting the problem.

Regards.
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 1
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Gardner,
When viewing a website on an Apple device (iPhone or iPad) you can choose to add a shortcut to the website to your homescreen. This way you can just click the icon and the website will load. See the attached screenshot of an apple device.

When you choose to do this you can usually create a specific icon file that will be used, instead of a smaller resized capture of the website homepage. What I would liek to do is create an icon of my clients logo and use this as the homescreen icon.

On other Joomla sites I have built it usually goes in the templates folder named apple-touch-icon.png.

I was wondering if this is correct with the T3 framework.

Lee
Attachments (1)
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 2
Accepted Answer Pending Moderation
0
Votes
Undo
Thanks Lee for the great tutorials.

Regards
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 3
Accepted Answer Pending Moderation
0
Votes
Undo
OK here are the steps:

1. Create your icon in these pixel sizes:

57 x 57
72 x 72
114 x 114
152 x 152

Save the images as png files and upload to your server either the images or template/images folder.

2. Duplicate your tpls/blocks/head.php file and rename it.

3. Modify your tpls/default.php (or whatever file you are using as your default layout) file to load the new renamed head file.

4. Open the renamed head file and add:

<link rel="apple-touch-icon" href="ABSOLUTE PATH TO IMAGE_icon-57x57.png">
<link rel="apple-touch-icon-precomposed" href="ABSOLUTE PATH TO IMAGE_icon-57x57.min.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="ABSOLUTE PATH TO IMAGE_icon-72x72.min.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="ABSOLUTE PATH TO IMAGE_icon-114x114.min.png">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="ABSOLUTE PATH TO IMAGE_icon-152x152.min.png">

Replace the ABSOLUTE PATH TO IMAGE with your URL to the folder where the images are stored. It must be the complete url starting with http:// eg:

<link rel="apple-touch-icon" href="http://www.t3-framework.org/images/bookmarks/t3framework_icon-57x57.png">


5. Refresh your site on your mobile device and add a bookmark / add to homescreen.

Your logo should now appear on your mobile device.

RI hope that helps someone!

Lee
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 4
Accepted Answer Pending Moderation
0
Votes
Undo
Hi,

Thanks Lee for the instructions.

I had some trouble getting this to work for me, and finally the issue was the absolute paths. Once I removed the full http://, and just used "/sitename/images/image_name.png" Then it worked for me.

If anyone is having issues with getting T3 to recognize the icons, check your source. My paths were rendered with double "http://" causing them to not load.
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 5
  • Page :
  • 1


There are no replies made for this post yet.
However, you are not allowed to reply to this post.