Hi
hope that i posted in the right forum, if not please move this discussion to the correct forum. thanks
I did a search on google and discovered that to do so, i would need to create an icon of 57px * 57px and name it "apple-touch-icon.png"
i would like to know where to place this in my moodle site so that when the users bookmarked my moodle site on their iPhone/Android phone, the icon would appear?
I would like to know the steps to achieve it.
thanks
Adma Lim(e)ri erantzunda
Re: How to create an iPhone/ Android Touch icon for my moodle site?
Hi Adma Lim,
First you will need to rename your icon to customIcon.png and upload it to your theme's folder. Then you will need to add the following line in the <head> section of your theme's header.html file.
<link rel="apple-touch-icon" href="<?php echo $CFG->themewww .'/'. current_theme() ?> /customIcon.png"/>
It should then work.
Hope this helps?
Mary
First you will need to rename your icon to customIcon.png and upload it to your theme's folder. Then you will need to add the following line in the <head> section of your theme's header.html file.
<link rel="apple-touch-icon" href="<?php echo $CFG->themewww .'/'. current_theme() ?> /customIcon.png"/>
It should then work.
Hope this helps?
Mary
Adma Lim(e)ri erantzunda
Re: How to create an iPhone/ Android Touch icon for my moodle site?
Hi Adma,
Further to my last comment (above). I have been reading up about the Apple Touch Icon for iPhone etc. There are a number of information websites giving much the same information on how to set this icon up, but they all seem to becomes a little confusing.
However, one site was very good and explained better what you need to do.
The information I gave before is not quite right, so here is the correct bit of code you need to add to the header.html file for your theme.
<link rel="apple-touch-icon" href="<?php echo $CFG->themewww .'/'. current_theme() ?> /apple-touch-icon.png"/>
Sorry for the confusion...I hope this works!
Mary
Further to my last comment (above). I have been reading up about the Apple Touch Icon for iPhone etc. There are a number of information websites giving much the same information on how to set this icon up, but they all seem to becomes a little confusing.
However, one site was very good and explained better what you need to do.
The information I gave before is not quite right, so here is the correct bit of code you need to add to the header.html file for your theme.
<link rel="apple-touch-icon" href="<?php echo $CFG->themewww .'/'. current_theme() ?> /apple-touch-icon.png"/>
Sorry for the confusion...I hope this works!
Mary
Mary Evans(e)ri erantzunda
Re: How to create an iPhone/ Android Touch icon for my moodle site?
Adma Lim -
Hi Mary
yes, there are a number of different info posted on the website and making it a little confusing to understand hence i turned to the moodle community for help.
Thank you for helping! I am so happy that the icon for my moodle site appeared on the iPhone!.
Adma
yes, there are a number of different info posted on the website and making it a little confusing to understand hence i turned to the moodle community for help.
Thank you for helping! I am so happy that the icon for my moodle site appeared on the iPhone!.
Adma
Mary Evans(e)ri erantzunda
Re: How to create an iPhone/ Android Touch icon for my moodle site?
I'm using Moodle 2.0.5, so there's no header.html file.
I tried adding your suggested line to my theme's general.php file (just below the favicon code), but that didn't seem to work.
Is there a better place?
Richard Miller(e)ri erantzunda
Re: How to create an iPhone/ Android Touch icon for my moodle site?
I'd suggest taking a look at Daniel's Zebra theme - if i remember correctly this has icons for a number of devices including apples, and maybe even blackberries and other fruit related products
<head>
<title><?php echo $PAGE->title; ?></title>
<link rel="shortcut icon" type="image/png" href="<?php echo $OUTPUT->pix_url('favicon/favicon', 'theme'); ?>" />
<link rel="icon" href="<?php echo $OUTPUT->pix_url('favicon/favicon', 'theme'); ?>" />
<link rel="apple-touch-icon-precomposed" href="<?php echo $OUTPUT->pix_url('favicon/apple-touch-icon-precomposed', 'theme'); ?>">
<meta name="viewport" content="user-scalable=<?php echo $zoomenabled; ?>, width=device-width, initial-scale=1.0, maximum-scale=2.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<?php echo $OUTPUT->standard_head_html(); ?>
</head>
Note: I've copied this code from an older version of Daniel's theme which is on my desktop rather than the current version which he uploaded recently, but I don't think there are significant changes to this part.
Richard
Richard Oelmann(e)ri erantzunda
Re: How to create an iPhone/ Android Touch icon for my moodle site?
I'd love to try this - so let me re-state the original question: which file should I be editing?
Richard Miller(e)ri erantzunda
Re: How to create an iPhone/ Android Touch icon for my moodle site?
Hi Richard,
What you attempted to do originaly was the correct way to do this. The only reason it did not work is because the code has changed from Moodle 1.9 to Moodle 2.0.
Following the same procedure I explained originally but this time add you apple-touch-icon.png to your theme's pix folder, and then add this line to general.php and frontpage.php (if your theme has these layout files)...
<link rel="apple-touch-icon" href="<?php echo $OUTPUT->pix_url('apple-touch-icon', 'theme'); ?>"/>
And that's it.
If you want to try Daniel's suggestion, where you can target different mobile types then follow his comment .
HTH
Mary
Mary Evans(e)ri erantzunda
Re: How to create an iPhone/ Android Touch icon for my moodle site?
I see ... thanks, Mary!
Worked like a charm.
Richard Miller(e)ri erantzunda
Re: How to create an iPhone/ Android Touch icon for my moodle site?
Richard Miller(e)ri erantzunda
Re: How to create an iPhone/ Android Touch icon for my moodle site?
Richard beat me to it, but here's the updated version:
<link rel="shortcut icon" type="image/png" href="<?php echo $OUTPUT->pix_url('favicon/favicon', 'theme'); ?>" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="<?php echo $OUTPUT->pix_url('favicon/h/apple-touch-icon-precomposed', 'theme'); ?>">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="<?php echo $OUTPUT->pix_url('favicon/m/apple-touch-icon-precomposed', 'theme'); ?>">
<link rel="apple-touch-icon-precomposed" href="<?php echo $OUTPUT->pix_url('favicon/l/apple-touch-icon-precomposed', 'theme'); ?>">
So I have this in my theme folder:
/pix/favicon/h/
/pix/favicon/m/
/pix/favicon/l/
the 57px version is for Android, Nokia and first Gen iPads
the 72px version is for gen 2 iPads
the 114px version is for retina displays (e.g. iPhone 4)
the naming of the file is essential and can't be changed - so you have to store them in different folders.
Richard Miller(e)ri erantzunda
Re: How to create an iPhone/ Android Touch icon for my moodle site?
Hi Richard,
If any of the answers from Richard and Daniel confusd you, as they did me, just ask again for a simplified version! LOL
Cheers
Mary
Mary Evans(e)ri erantzunda
Re: How to create an iPhone/ Android Touch icon for my moodle site?
I can see this discussion is finished now, but I wanted to ask if all these apple icons can be covered with one ico file. I'm using the stock MyMobile them for devices included with 2.3.x
And also, my server is giving a constant string of error messages about these files not being there. Is that a problem?
[Thu Jan 17 09:51:16 2013] [error] [client 37.127.239.179] File does not exist: /home/public_html/apple-touch-icon-precomposed.png
[Thu Jan 17 09:46:55 2013] [error] [client 37.105.126.105] File does not exist: /home/public_html/apple-touch-icon-precomposed.png
[Thu Jan 17 09:46:55 2013] [error] [client 37.105.126.105] File does not exist: /home/apple-touch-icon-114x114.png
[Thu Jan 17 09:46:55 2013] [error] [client 37.105.126.105] File does not exist: /home/public_html/apple-touch-icon-114x114-precomposed.png
Daniel Lombardo(e)ri erantzunda
Re: How to create an iPhone/ Android Touch icon for my moodle site?
Hi Molten,
Not knowing what code you have added to MyMobile theme that is causing your server to give out these errors, I can't comment.
Mary
Daniel Lombardo(e)ri erantzunda
Re: How to create an iPhone/ Android Touch icon for my moodle site?
that's likely the result of a browser looking for it in / of your folder - not a moodle issue. The same thing can be said for favicon