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.
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.
Table of Contents
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
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.
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.
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.
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.
