PrestaShop Favicon: How To Make and Change

You may not have realized it, but you’re probably staring at a store now thanks to the little icon next to each page title. It’s called “favicon.” And this simple touch adds personality and identity for your business!

Favicon logo in a browser tab
Favicon logo in a browser tab

It is not hard to change a favicon on PrestaShop. Unfortunately, creating one is harder.

In this article, I will discuss the following:

Changing PrestaShop Favicon

How to change favicon in PrestaShop? Log in to store back office, click Design in the sidebar, then Theme & Logo menu item. On the newly opened page, you will see the favicon upload form.

How to change PrestaShop favicon in the back office
How to change PrestaShop favicon in the back office

For the older PrestaShop version, this option is the Preferences → Themes → Favicon page.

A free tool like Real Favicon Generator will convert your logo image to an ICO format and resize it based on recommendations.

How to change PrestaShop favicon in the back office
How to change PrestaShop favicon in the back office

How to Create Favicon For PrestaShop Store

If you’re looking to create a new logo and don’t have one yet, this can be problematic.

I recommend generating a good-looking but straightforward prototype logo and favicon for my clients with this tool.

Favicon generator
Favicon generator

With this tool, you won’t need to convert it to any other format – it is appropriately resized and formatted for you. So you can go and upload it into your PrestaShop Design settings page.

How To Test PrestaShop Favicon

Suppose you have uploaded a favicon and notice that the browser is still showing an old one. In that case, you are running into the browser cache problem.

If you do hard-refresh for a page (command+shift+r on Mac and ctrl+shift+r on other OS), you will see that it won’t change.

The easiest solution would be to open a new URL in another browser tab and hit the refresh button. This cache reset hack works on all browsers.

If you change the favicon, clear the cache for other users. Do that in Advanced Parameters → Performance → Clear cache.

Where is PrestaShop Favicon In The Filesystem (or FTP)

You can find the Favicon image in the ‘img' folder on your PrestaShop filesystem.

Image filename, obviously, will be ‘favicon.ico‘.

Apple Touch, Android, and Windows PrestaShop Favicon

If you used Real Favicon Generator, you would see it suggests using some HTML code for specific images.

Put all icons from that zip file to the root folder of PrestaShop source and copy HTML code you received from mentioned website.

Favicon HTML code to insert to PrestaShop head.tpl file
Favicon HTML code to insert to PrestaShop head.tpl file

You need to put this HTML code to your themes header file, which you can find in the themes folder file named ‘head.tpl'. For example default theme header file will be in the location ‘themes/classic/templates/_partials/head.tpl.

Other design tweaks

There are many PrestaShop customizations you can make to make your store awesome. See our blog for more customization articles.