[intro] After completing this guide, you will know what a Favicon is and can identify an .ico file type. You will also learn to create a Favicon that matches your logo and company branding and upload it to your EKM shop.[/intro]

A Favicon is a symbol that displays within the browser tab on the front end of your website and next to your website’s name when saved in a browser’s favourites or bookmarks list.

[warning]If you have already completed Adding Apple Touch Icons to your EKM online shop but want to use this method of adding additional favicon images to your EKM online shop, you must remove the custom code you added as part of that process. This guide replicates that same process without adding custom code. [/warning]

Why should I add a Favicon?

You need to add a Favicon to your EKM online shop simply because it helps it look professional and ‘finished’. If you look at some of the largest online shops such as Tesco, Debenhams and B&Q, you’ll notice that they all have Favicons:



Although having a Favicon does not affect your shop in terms of improving SEO, from a customer experience point of view it’s excellent as it makes the browser tab viewing your shop stand out against any more that the customer may have open at the same time, and this also makes your shop more visible in the customer’s list of ‘favourites’, ‘bookmarked’ or ‘visited’ sites.

Creating your Favicon

1. To create a Favicon, create the symbol first and then convert the file type. Create a .png image that is square and measures exactly 512 x 512 pixels. Ensure that the symbol is very basic and consists of minimal colours and details - too many colours or too much detail can result in a bad-quality Favicon. If you don’t have a specific symbol within your existing website logo that you can use, simply crop the first letter of your website name and use that single letter in your image instead. 

[tips]You can read more about logos and glyphs in this guide. [/tips]

2. When you have created this image, you need to use one of the many Favicon sites online to convert it into an .ico file. A website such as Favicon.cc is ideal for this. Click the Import Image button:

3. Click the Choose File button:

4. Locate the image on your computer and then click open on the File Explorer window. You’ll then see the name of your image displayed. Click Upload:

5. You’ll then see the preview of your Favicon. Click Download Favicon:

6. The file will automatically download into the Downloads Folder on your computer. Now you’ll have your original 512-pixel square (.png) image and the 16-pixel square (.ico) favicon image. Next, you need to log into your EKM online shop and click the Design tab:

7. Click File Manager:

8. Within the File Manager, click the Favicon tab:

9. Click the ‘Drop a favicon here or click to select a file’ text to upload the .ico and .png files from your computer:

10. When you have uploaded both images, scroll down the page, and you’ll see a preview of the favicon and below that, a list of the images generated from your 512-pixel .png image that have been used to generate Apple Touch icons and favicons:

11. Uploading the 512-pixel square .png image is something that search engines can reference instead of the usual .ico favicon file, so if the latter is not suitable for whatever reason, a version of the .png image will be used in its place. Now, if you check the front end of your EKM online shop - the way a customer would see it - the favicon will be visible on the browser tab:

[remember]Using this method does not guarantee that your images will be displayed against your EKM online shop in search engine results, as what is displayed is up to the search engines themselves. However, this method gives the search engine a choice of what to display instead of referring to the default platform .ico file. For search engines to ‘notice’ those images and display them accordingly takes time; changes of this nature can take a while to be recognised, and it can take weeks, or even months, for the search engine to ‘realise’ they are there.[/remember]

How do I get Google to recrawl my EKM online shop?

You can request Google to recrawl your EKM online shop to encourage it to ‘notice’ the icons you have added. You can do this by resubmitting your Sitemap to your Google Search Console account by following the steps in this Guide. 

[more]

[/more]

[contact] If you need our help with your EKM online shop, contact your Ecommerce Expert or the Customer Support Team, who will be able to point you in the right direction. We're open from 8am-6pm weekdays and 9am-5.30pm weekends. If you'd like to suggest a feature or an upgrade on any of the EKM platforms, please let us know on the EKM Suggestions Board. If you have a non-account specific question to ask the EKM Team, join us in EKM Community. If you need some inspiration for your EKM online shop, listen to our podcast on iTunes and Spotify.[/contact]