How to Add a Favicon to Your OpenCart Website
Favorite icons or as you probably know them “favicons” are small images, which you could see at the top of your browser's tabs or next to each of your bookmarked sites title. These tiny images have a great impact on the overall perception of a user for your website. Most often they are minified version of a site’s logo or any other distinctive site’s characteristic. Their sole purpose is to make your site more memorable and recognisable.
1. What is “favicon”
Usually adding a favicon to your website would require to prepare an image with the exact dimensions - 16x16 or 32x32 pixels. Then you would need to convert it to a .ico file. There are many online tools for this purpose just a Google search away. Since most of the modern browsers allow using a <link> tag in the <head> of the page, you could use a png file as well by specifying a site relative path. To ensure support for older browsers, it is recommended to use a copy of the image you have chosen, rename it favicon.ico and place it in the root folder of your site.
Luckily enough being an OpenCart user you have this whole process narrowed down to just a few clicks. Let’s see how we can change the default favicon of your OpenCart store.
2. Preparing an image
As mentioned above favicons have a limitation when it comes to their size. It is mandatory to resize your image to either 16 x 16 pixels or 32 x 32 pixels. Other sizes are not supported. If your logo does not look good represented in these dimensions choose just part of it or any other distinctive feature. After you have chosen the desired image save it somewhere on your hard drive (desktop for example).
3. Uploading and assigning the image
Once you are ready with the image, go ahead and log into your OpenCart administration panel. Navigate to System -> Settings. Once the Settings page loads click on the edit button of the store whose favicon you want to change.
Next go to the “Image” tab. Here you can choose your store’s logo and favicon. To change your icon click on it. A popup with two options will appear. Click on the edit button.
Once you click, edit a pop-up window showing the content of your image folder will open. Here you can select an image that is already present on your server or upload a new one. Since I do not have any images besides the default ones, I will upload a new favicon. To do so click the upload button at the upper left corner of the pop-up.
Browse your device's storage and locate the image you have previously saved. Shortly after clicking upload you will receive a success message.
Select the image you have just uploaded. In my case, this would be favicon.png. The final step is to save the changes we have just made.
To see the result of our work simply go to the home page of your store and click refresh.
Here is how the favicons looked like before and after on the site I used for demonstration.
Before:
After:
Conclusion
This is how simple it is to add or change your favicon in OpenCart. We hope this tutorial will help you add this small but professional touch to your website appearance.
