Joomla Templates Club 406,261 posts

[susanburton Friend susanburtonJoin date: May 2012Posts: 14Downloads:9Uploads:1 Thanks: 7]

#685654

We want our users to be able to add our icon to their touch screen. Currently the template just adds a screenshot of the home page which is too small to see. The last forum discussion on this was in 2011. How can we add our icon to our template?

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#686089

Hi @susanburton,

I’m not entirely sure of which place in our template you want to add icon, could you clarify a bit more details – or send me some screenshot illustrates how it should be so that I can help?

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#748945

Hi @susanburton,

I’m not entirely sure of which place in our template you want to add icon, could you clarify a bit more details – or send me some screenshot illustrates how it should be so that I can help?

[Till Friend TillJoin date: April 2013Posts: 15Downloads:20Uploads:0]

#686179

Hi Susan,

what a coincidence. I just added the functionality to my own site. Follow these steps:

Create different touch-icons. You could do that with an online generator, e.g. http://iconifier.net/ For a good in-depth explanation on touch-icons read here.

Upload the touch-icons to where you want them on your server. I used the root images folder. But you also could use the template images folder.

On your server copy the file

/templates/uber/tpls/blocks/head.php

to the folder

/templates/uber/local/tpls/blocks/head.php

If there is no local folder, create one and the subsequent directory structure.

Edit the copied head.php and add some or all of the following lines of HTML. I added them just before the closing comment for mobiles and handhelds at line 41. Seemed fitting.

<link rel=”apple-touch-icon-precomposed” sizes=”57×57″ href=”/path/to/your/image/folder/apple-touch-icon-57×57-precomposed.png”>
<link rel=”apple-touch-icon-precomposed” sizes=”76×76″ href=”/path/to/your/image/folder/apple-touch-icon-76×76-precomposed.png”>
<link rel=”apple-touch-icon-precomposed” sizes=”120×120″ href=”/path/to/your/image/folder/apple-touch-icon-120×120-precomposed.png”>
<link rel=”apple-touch-icon-precomposed” sizes=”152×152″ href=”/path/to/your/image/folder/apple-touch-icon-152×152-precomposed.png”>
<link rel=”apple-touch-icon-precomposed” sizes=”180×180″ href=”/path/to/your/image/folder/apple-touch-icon-180×180-precomposed.png”>
<link rel=”icon” sizes=”192×192″ href=”/path/to/your/image/folder/touch-icon-192×192.png”>
<!– //META FOR IOS & HANDHELD –>

[Till Friend TillJoin date: April 2013Posts: 15Downloads:20Uploads:0]

#748976

Hi Susan,

what a coincidence. I just added the functionality to my own site. Follow these steps:

Create different touch-icons. You could do that with an online generator, e.g. http://iconifier.net/ For a good in-depth explanation on touch-icons read here.

Upload the touch-icons to where you want them on your server. I used the root images folder. But you also could use the template images folder.

On your server copy the file

/templates/uber/tpls/blocks/head.php

to the folder

/templates/uber/local/tpls/blocks/head.php

If there is no local folder, create one and the subsequent directory structure.

Edit the copied head.php and add some or all of the following lines of HTML. I added them just before the closing comment for mobiles and handhelds at line 41. Seemed fitting.

<link rel=”apple-touch-icon-precomposed” sizes=”57×57″ href=”/path/to/your/image/folder/apple-touch-icon-57×57-precomposed.png”>
<link rel=”apple-touch-icon-precomposed” sizes=”76×76″ href=”/path/to/your/image/folder/apple-touch-icon-76×76-precomposed.png”>
<link rel=”apple-touch-icon-precomposed” sizes=”120×120″ href=”/path/to/your/image/folder/apple-touch-icon-120×120-precomposed.png”>
<link rel=”apple-touch-icon-precomposed” sizes=”152×152″ href=”/path/to/your/image/folder/apple-touch-icon-152×152-precomposed.png”>
<link rel=”apple-touch-icon-precomposed” sizes=”180×180″ href=”/path/to/your/image/folder/apple-touch-icon-180×180-precomposed.png”>
<link rel=”icon” sizes=”192×192″ href=”/path/to/your/image/folder/touch-icon-192×192.png”>
<!– //META FOR IOS & HANDHELD –>

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#688133

But I don’t know how it should be, could you send me screenshot?

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#749178

But I don’t know how it should be, could you send me screenshot?

[Author]

Posts