• Closed by: Marek
  • Closed on: 02.01.19, 14:50
  • Reason: No answer from a customer

Ticket #13346 - smartphone icon

hello,
I would like to know how I can set the icon (icon not favicon!) of my logo for the smartphone (the one that is usually 500×500 px).

thank you

Comments

Marek 11 Dec 2018, 15:08

You have to add your icon (in SVG format) to icons base, read more here https://alysum5.promokit.eu/promokit/documentation/#svg

Then you can use following code to put it anywhere

<svg class="svgic"><use xlink:href="#si-TITLE"></use></svg>
leandro bellani 12 Dec 2018, 09:24

sorry anywhere where?
I refer to the logo icon that appears when you save the site on your smartphone not like the facebook icon. Can you be more precise?

thank you

Marek 12 Dec 2018, 12:40

:) anywhere mean in any place of .tpl file of your theme.
1. Add your icon to the file /themes/alysum/templates/_partials/svg.tpl (read more in the documentation)
2. Add following code into the file /themes/alysum/templates/_partials/logo.tpl 

<svg class="svgic"><use xlink:href="#si-TITLE"></use></svg>

where TITLE is he name of your icon

leandro bellani 13 Dec 2018, 09:40

hi,
I tried to insert a svg icon following the guide and does not change anything if I save the site on the Home screen of my phone still does not see each other.
where I’ve wrong?

attached screenshot of the code

leandro bellani 13 Dec 2018, 10:27

I’ve change the header and is appear this icon baloon with text alysum instead my logo!
the icon with balloons it’s the one that i’ve add in the code that you gave me but it’s absolutely not what I meant, I don’t want the logo I wanted the icon that appear in the smarthphone like icon of the app when a person save the site in its phone.

Marek 13 Dec 2018, 11:34

I suppose you need this service https://realfavicongenerator.net

leandro bellani 13 Dec 2018, 12:55

no, i don’t need a favicon like i write you in the first message.

i need a icon like app that appear in the smartphone.

to explain myself better: if you go in a whatever website and right click (hold with your finger) or at the top right of google there are 3 dots → add to home screen, The website will appear as an app in your smartphone.

doing this, no icon appears and this is not good.

photo for example

thank you

Marek 13 Dec 2018, 13:22

you can do that with that service https://realfavicongenerator.net

leandro bellani 13 Dec 2018, 14:40

ok thanks, what is the path where I have to implement the code that is created by https://realfavicongenerator.net in my prestashop site?

the files should I put them in www.example.it/img?

thanks

Marek 14 Dec 2018, 15:06

If you want I can ask my colleague to help you with that customisation.
As for your question, the path could be anywhere, it doesn’t matter

leandro bellani 14 Dec 2018, 15:16

sorry, I opened a ticket because I would like to set the icon, I don’t understand what you’re telling me, if your colleague can help me pass the ticket as long as I go ahead.

thanks

Alex 14 Dec 2018, 20:57

Hi.
Here is tutorial about icon “add to homepage” https://webdesign.tutsplus.com/articles/quick-tip-give-your-website-an-ios-home-screen-icon--webdesign-10067
the code will look something like that 

<link rel="apple-touch-icon" sizes="144x144" href="apple-icon-144x144.png" />

here is the file path where you need to add the code \themes\alysum\templates\_partials\head.tpl
add the code after 

<link rel="shortcut icon" type="image/x-icon" href="{$shop.favicon}?{$shop.favicon_update_time}">

If you want I will add it for you for free. For that I need the icon file and ftp. FTP as I see you already added in the profile.

leandro bellani 19 Dec 2018, 10:07

thank you, but I don’t understand, where do I insert my image, .jpg icon?

Alex 19 Dec 2018, 11:04

put the image here “site/img/link_icon.jpg” and add this code 

<link rel="apple-touch-icon" sizes="144x144" href="{$urls.img_ps_url}link_icon.jpg" />