How to make a transparent logo in #Prestashop 1.6

Published in Prestashop 1.6
How to make a transparent logo in Prestashop 1.6
 
How to make a transparent logo in #Prestashop 1.6
 
So you are busy customizing your new Prestashop 1.6 and upload a 24 bit png of your beautifully logo with a transparent background expecting it to look swish on the frontage, but it doesn’t. I appears on the homepage with a white background. That makes no sense! Right? Here is what it happens and how to fix it so Prestashop 1.6x displays your png/gif logo correctly with transparency.
Why does Prestahop show my png logo without transparency (with a white background)?
 
By default Prestashop displays all images (no matter what the original image file) as optimized jpgs. You can find the settings for how much compression it uses in the back office under preferences>images. I recommend increasing the JPEG quality to 93 so that images look sharper, yes your page load will suffer a teensy bit, but with internet speed constantly increasing and the perception of quality for your products so important, this will improve the look of your Prestahop website.
 
How do I make png logo files display properly?
 
To make Prestashop 1.6 display transparency correctly you are going to need to do this:
  1. Connect to your server via FTP (if you can’t you will need to use the web based file manager found in your hosting providers control panel)
  2. Go the folder:    /img  (this is where Prestashop stores images)
  3. Upload your logo in a .png format (this is the most common type file with transparency supported)
  4. Go the folder:    /themes/your-theme (where “your-theme” is the name of the theme you are using, by default it will be “default-bootstrap”). Edit the file header.tpl in a text editor. 
- - Note in the following code, you have to remove the forward slash ( / ) this is not written in the article, but is added by the website system. I am currently trying to stop this happening, but until I do you will have to remove the / or the code won't work....
 
Find the code:
src="{$logo_url}"
Change it to: src="/{$img_ps_dir}logo.png?" (where “logo.png” is the filename for the png logo file you uploaded to the /img directory on the server)
 
Please note. This is a ‘hack’ solution. If you update your Prestashop installation it may affect the way your logo is displayed if the code you have edited gets overwritten. You simply need to be aware you may have to manually redo this in the future.
 
Prestashop 1.4 uesers:
Just in case it’s useful, in Prestashop 1.4:
Find the code:src="{$img_ps_dir}logo.jpg?{$img_update_time}"
Change it to: src="/{$img_ps_dir}logo.png?{$img_update_time}"
 
Hope that solves your problem with transparent logos in Prestashop.