iPhone/iPad Mobile Icon for Prestashops?

[crisis.sam]

Hey,

I'm looking at creating a mobile icon for when users bookmark the website on their iphone/ipad/ipod touch etc the customized icon will be on their home screen.

I followed this guide on how to do it:

http://www.askdavetaylor.com/how_to_create_custom_apple_iphone_website_icon.html

It hasn't worked and all I see is a white icon with a grey question mark (the prestashop error img?)

Would anyone have any ideas on how to get that to work?

or any info on optimizing Prestashop stores for mobile use?

Many thanks in advance!

Sam

[crisis.sam]

Anyone have any thoughts on this?

[FredActin]

Hi,

I guess the path to your image in incorrect.

On the tutorial, they ask you to link to your image

<link rel="apple-touch-icon" href="/Graphics/iphone-icon.png" />

Make sure that whatever path you put there is correct. Get started with an absolute path ( something like http://www.mywebsite.com/myimage.png ) and check that you can see this image by typing the path on your browser.

[crisis.sam]

Hey,

thanks for having a look.

I've put the image named apple-touch-icon.png in the root directory.


I have just checked where the image is on the browser by going to domain.com/apple-touch-icon.png and prestashop redirects to domain.com/img/404.gif

Where would I place the code if I were to link to the image through the sub folders for examples domain.com/img/apple-touch-icon.png ?

[FredActin]

When you say that you have put the image on the root directory, do you mean you uploaded it using FTP?

I don't understand your second question sorry

[crisis.sam]

Yes I've uploaded it through FTP and its location is domain.com/apple-touch-icon.png

but that automatically redirects to a 404 image error (domain.com/img/404.gif)


If I was to upload the image to a sub folder such as /img which file, and where would I need to insert the line of code:

<link rel="apple-touch-icon" href="/Graphics/iphone-icon.png" />

Thanks

[FredActin]

Well that suggests to me that the path is incorrect, please double check it. I just tried to access directly an image uploaded to the root of a shop and there is no issue.

Re the piece of code: The explanation is on the tutorial you linked to... you add this code when you add a Bookmark... This has nothing to do with Prestashop. If you have a question about the tutorial you should ask the guy who made the tutorial.

[Mike Spike]

I had the same issue, but have now successfully solved it!! :-)

Following the instructions found at: http://www.ofzenandcomputing.com/zanswers/3012
I downloaded and amended the icon Apple-Touch-Icon.psd to fit my criteria.

I then added the following line to the header.tpl of my current theme selection
<link rel="apple-touch-icon" href="http://judaica-online.co.uk/apple-touch-icon.png" />
(you should replace judaica-online.co.uk with your own domain address


**Initial mistake** I saved the file as "apple-touch-icon.png"
1. the iPad did not display my new icon
2. the image did not display when I went to its site location (http://judaica-online.co.uk/apple-touch-icon.png)

**Solution**
For it to work, all you need to do is:
1. open your .psd image using Adobe Fireworks
2. Goto 'file' then click 'export'
3. Name your image 'apple-touch-icon'
4. At the 'Export' scroll down menu, select 'Pages to Files'
5. At the 'Export AS' scroll down menu, select 'Fireworks PNG (*.png)
6. Click save and then upload your image to the root directory (i.e. the location you pointed to in header.tpl)

and that's all!!

Please feel free to check out my website and see my results!
Judaica Online

Hope this helps you!

Mike

[maluma]

Hey everyone,

by now with all the different iPhones & iPads out there, it is the best to provide appicons in different sizes. It is also possible to generate some for android devices. Because it is really tedious and time-consuming to create all these icons and insert tags for each of them, I wrote a litle module which is doing that for you.

 

So for the next one, who stumbles accross this thread, you can check it out here:

http://addons.prestashop.com/en/mobile/10910-appicon-apple-touch-icon.html

 

Greetings

maluma