Knowledgebase: Site Design

How can I add a Favicon to my Store?

 

A favicon is a simple graphic icon that can be added to any website and will display on the tabs and title bars of most browsers when viewing the site. Favicons will also display on visitor's bookmarks and browser history listings and help your site stand out a bit better when listed among other sites.

Below is an example of what favicons look like:

To add a favicon to your site, you will need the following item:

  • A favicon.ico file which contains your icon image

Creating your Favicon

The favicon.ico file can be created in a variety of different ways. Most photo-editing programs will have free plugins available that can be used to create your file and save it in *.ico format. Beginning with Shift4Shop version 11.3.4, you can also generate a favicon.ico file directly from your Online Store Manager.

To create your favicon:

  1. Log into your Shift4Shop Online Store Manager
  2. Using the left hand navigation menu, go to Settings >General > Store Settings

Below the Store Logo section, you will see a section for your favicon

  1. Click on the "Create a favicon" button to continue.

This action will take you to the Shift4Shop Favicon Maker which will allow you to generate a favicon from an image file.

  1. Set the dimension you'd like to use for the favicon file ranging from 16 x 16 px to 128 X 128px

Tip:
The dimension selector described above allows you to select a higher resolution in order to help preserve some of the detail that may be present in your icon image. Generally speaking however, favicons are typically shown in 16 by 16 pixels.

Therefore, the image used for your favicon should be square, and contain sharp edges/colors so that it appears clear in this small resolution. Check out some popular sites like wikipedia, google, facebook, amazon and others to get some ideas.

  1. Click on choose file to browse your computer for the favicon image you'd like to convert
  2. Then click on the "Convert" button to create the file

Once the file is ready, click on the "Download your favicon" link to download it to your computer. Be sure to name it favicon.ico since that is the name our system uses for the file.


Uploading your Favicon

Once you have your favicon.ico file created, go back to the Settings >General > Store Settings section of your Online Store Manager

  1. Click on the "Browse" button to open up the file manager (it will slide out from the right side of the screen)
  2. At the bottom of the file manager, click on "Upload Files" to locate and upload your favicon.ico file

Once the upload is complete, click away from the file manager to close it.

  1. Click "Save" at the top right to commit your changes.

Note:
In some cases, after you've uploaded the file, you may not see your favicon right away. The favicon file and its display are very dependent on cached Internet files, so you may need to clear your browser's cache information before it will be viewable. Most browsers allow you to clear cache by using the CTRL+SHIFT+DEL keys on your keyboard. After clearing cache be sure to close your browser, then re-open the browser and try again.

If you are still unable to see the favicon, try a different browser that you normally don't use or simply wait a few hours for the cache to update organically.

It is also worth noting that you may need to clear your store's cached files in order to see the new favicon. The store's cache can be cleared by going to the "General" tab located in the Store Settings page mentioned above.


Default Favicon

If you need to restore the site's default favicon for whatever reason, you can use the following file:


Help Desk Software by Kayako fusion