What is a Favicon?
A favicon (Favourite Icon) is a small icon which is displayed on a web browser when someone is visiting a web page. Commonly just 16×16 pixels in size, Favicons can be shown in various places on a web browser such as on browser tabs, bookmarks, the links bar and even in the address bar. The size of the favicon can differ depending on where the icon is to be shown (32 x 32, 64 x 64 and higher) but the standard size accepted cross-browser is 16 x 16px.
Why use a custom Favicon?
A favicon helps a user identify what’s on each browser tab when they have multiple tabs open, allowing them to navigate from one tab to another with ease.
Most merchants put a great deal of care into branding their site; using consistent colour schemes, fonts, and graphics. Consistent branding is key for any successful business so it’s therefore quite surprising to find that many retailers overlook something as prominent as a favicon.
The default favicon on any EKM shop is our own shopping cart logo which is easily recognisable so it’s therefore, advisable that you change it to something more fitting for your website and brand.
Changing your Favicon
Below we’ll cover the easiest way to create a favicon from your logo and implement it on your shop.
Choosing an image
The first step to changing your favicon is to decide what image you’re going to use. Nine times out of ten this image will be your company’s logo as the favicon is simply an extension of your branding. However, as you’re going to be creating a 16 x 16px version of this logo, you need to bear a few things in mind. First of all you should avoid word based Favicons as they’re barely legible at such a small size. Even a short, 3 letter company name such as ‘USC’ can be tough to read as shown below.
An alternative is to use one specific letter that’s associated with your brand such as the Wikipedia 'W' or stick to graphical Favicons which are clear and easily recognisable.
Once you've established what graphic you’re going to use for your Favicon, you’ll need to ensure that the image is square or on a square canvas and with minimal white space. You can do this using photo editing software such as Adobe Photoshop or one of many free online alternatives like Pixlr.
Generating the Favicon
Once you’ve saved your graphic on a square canvas without any unnecessary white space, the next step is to visit a Favicon Generator such as Favicon.cc. Using this system you can import your logo into the 16×16 pixel grid and easily edit it with handy tools like a colour picker and a paint tool to get it looking perfect. Next, you simply need to save your Favicon to your computer and head over to your EKM account.
Uploading your Favicon
Visit your shop’s Design section and click File Manager before visiting the Favicon tab along the top of the File Manager. The final step is to simply drag and drop your newly created Favicon into the file manager in order to upload it to your shop.
[remember]Make sure you clear your browser cache before trying to view your new Favicon on your live shop as there’s a good chance the old Favicon will remain cached if you don’t.[/remember]