PrestaShop 1.6.x. How to change the logo and favicon

The following tutorial is going to show how to change the logo and favicon in PrestaShop 1.6.x templates.

PrestaShop 1.6.x. How to change a logo and favicon

1. The Prestashop admin panel allows replacing the logo and favicon images inside it. Let’s create our own logo and favicon (if you already have your own logo and favicon, please, proceed to the Uploading logo and favicon section).

2. Creating a Logo

   1. We recommend changing your company name and logo using the Adobe Photoshop software. In this case your logo and company name will have the same design as the company name and logo in the original template.

   2. Unzip the sources.zip folder (check the following tutorials on how to extract files from the archives with WinZip(PC) and StuffitExpander(MAC)), go to the psd folder and open the .psd file in Adobe Photoshop. Activate the Text tool (T hotkey) and change the company name.

      

   3. Make layers with the logo background invisible to get a transparent logo. Enable the Move tool (V), hold Ctrl and click the background. The background layers will be highlighted and you will be able to hide them easily.

      

   4. Activate the Slice Select tool. Select the slice with your logo layers.

      

   5. Go to File -> Save for Web & Devices. Select the slice with the logo. Use the same options as on the screenshot below. Click Save and choose to save only the selected slices.

      

   6. We have successfully created our new logo image.

3. Creating a Favicon

   NOTE: Favicons are small 16×16 icon files that are displayed next to the URL of your site in the browser address bar. Additionally they’re often displayed next to the name of your site in a user’s list of open tabs and bookmark listings making it easier for the user to quickly identify your site among others.

   1. You can create your own favicon for free at some web sources, for instance, at Favicon Generator.

   2. If you have an image that you want to convert into a favicon, click Browse in the Generator tab and then press the Create Favicon button. Download your favicon to your desktop.

      

   3. In the Editor tab, you can draw your own image. In Gallery, some latest collection of favicons is located.

   4. Now you are ready to upload your images to your store.

4. Uploading the logo and Favicon

   1. Log into your admin panel.

   2. Navigate to Preferences->Themes.

      

   3. Look for the Header Logo option in the Appearance section.

   4. Click the Add file button and browse your new logo at the desktop.

      

   5. Repeat the same steps for the Favicon option.

   6. Click the Save button to confirm your changes.

      

5. Check your webstore front end. We have managed to change our logo and favicon successfully.

Feel free to check the detailed video tutorial below:

PrestaShop 1.6.x. How to change a logo and favicon