Jump to content

Edit History

cyssoo

cyssoo

Yop, 

I don't think Prestashop Themes are really useful with favicons. It really depends on the theme you've chosen.

On Prestashop 1.6, you should use this favicon generator :

https://www.favicon-generator.org

This tool will give u some files and in an HTML file some URL

Method goes that way :

- upload favicons generated in /themes/img/favicons on /themes/yourtheme/img

- delete theses lines in header.tpl on your theme (/themes/yourtheme/header.tpl)

        <link rel="icon" type="image/vnd.microsoft.icon" href="{$favicon_url}?{$img_update_time}" />
        <link rel="shortcut icon" type="image/x-icon" href="{$favicon_url}?{$img_update_time}" />

- add theses lines instead (Prestashop 1.6) :

<link rel="apple-touch-icon" sizes="57x57" href="{$img_dir}/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="{$img_dir}/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="{$img_dir}/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="{$img_dir}/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="{$img_dir}/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="{$img_dir}/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="{$img_dir}/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="{$img_dir}/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="{$img_dir}/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="{$img_dir}/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="{$img_dir}/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="{$img_dir}/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="{$img_dir}/favicon-16x16.png">
<link rel="manifest" href="{$img_dir}/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="{$img_dir}/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">

 

For Prestashop 1.7, use {$urls.img_url} instead of {$img_url}, folder is still on your theme (but in a different place).

Save, that's all. You'll have more that just Prestashop favicons. Depends on your current theme. Apple requires more than a simple favicon, or a Microsoft favicon.

However, you should ask your host provider for chmod or chown (means you have or haven't the right permissions to write into some folders, as old floppy disks). I think ur problem went from provider, or a bad Prestashop install/theme.

Do not worry for a simple favicon, you can simply force it on your theme (or child theme if u use PS 1.7, already seen this issue and solved it this way)

EDIT : i've made a tutorial based on classic theme, using custom favicons. You can read it here :

https://www.team-ever.com/prestashop-1-7-creer-un-theme-enfant-child-theme/

There's a classic child theme at the end of the tutorial. You will only have to upload your own favicons, and make sure favicon.ico is on your Prestashop root folder. 

cyssoo

cyssoo

Yop, 

I don't think Prestashop Themes are really useful with favicons. It really depends on the theme you've chosen.

On Prestashop 1.6, you should use this favicon generator :

https://www.favicon-generator.org

This tool will give u some files and in an HTML file some URL

Method goes that way :

- upload favicons generated in /themes/img/favicons on /themes/yourtheme/img

- delete theses lines in header.tpl on your theme (/themes/yourtheme/header.tpl)

        <link rel="icon" type="image/vnd.microsoft.icon" href="{$favicon_url}?{$img_update_time}" />
        <link rel="shortcut icon" type="image/x-icon" href="{$favicon_url}?{$img_update_time}" />

- add theses lines instead (Prestashop 1.6) :

<link rel="apple-touch-icon" sizes="57x57" href="{$img_dir}/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="{$img_dir}/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="{$img_dir}/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="{$img_dir}/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="{$img_dir}/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="{$img_dir}/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="{$img_dir}/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="{$img_dir}/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="{$img_dir}/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="{$img_dir}/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="{$img_dir}/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="{$img_dir}/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="{$img_dir}/favicon-16x16.png">
<link rel="manifest" href="{$img_dir}/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="{$img_dir}/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">

 

For Prestashop 1.7, use {$urls.img_url} instead of {$img_url}, folder is still on your theme (but in a different place).

Save, that's all. You'll have more that just Prestashop favicons. Depends on your current theme. Apple requires more than a simple favicon, or a Microsoft favicon.

However, you should ask your host provider for chmod or chown (means you have or haven't the right permissions to write into some folders, as old floppy disks). I think ur problem went from provider, or a bad Prestashop install/theme.

Do not worry for a simple favicon, you can simply force it on your theme (or child theme if u use PS 1.7, already seen this issue and solved it this way)

×
×
  • Create New...