PrestaShop Favicon: How To Make and Change

PrestaShop Favicon: How To Make and Change

If you looked now into a browser bar, you would notice a small icon next to the page title - you would see something called favicon. This simple little touch adds identity to your store.

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

It is not hard to change a favicon on PrestaShop.

But, unfortunately, it is harder to make one.

In this article, we will solve both issues.

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.

Change PrestaShop favicon in the back office
Change PrestaShop favicon in the back office

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

PrestaShop favicon upload form only accepts .ico file formats. If you use any other formats (PNG, JPG, JPEG, GIF), you must convert them to ICO first.

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

Favicon converter online tool
Favicon converter online tool

How to Create Favicon For PrestaShop Store

A bit problematic when you don’t have any good logo yet.

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 URL example.org/img/favicon.ico 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.