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!
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 Make a PrestaShop Store Favicon From an Existing Logo
- How to Create Favicon For PrestaShop Store
- How To Test PrestaShop Favicon
- Where is PrestaShop Favicon In The Filesystem (or FTP)
- Apple Touch, Android, and Windows PrestaShop Favicon
- Other design tweaks
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.
For the older PrestaShop version, this option is the Preferences → Themes → Favicon page.
How to Make a PrestaShop Store Favicon From an Existing Logo
A free tool like Real Favicon Generator will convert your logo image to an ICO format and resize it based on recommendations.
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.
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 :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.
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.