Favicon & App Icon

Last updated 7 months ago

You can edit your favicon at "Settings > Favicon" under the admin interface.

What Is A Favicon?

Traditionally a favicon refers to the little image beside the website tab name. To get a better idea of what a favicon is and why it's used, check out this.

Today, the favicon has evolved and mobile devices now utilize the same concept as favicons to enable you to convert your website into an 'app' on the user's mobile device. Setting this up is extremely simple, currently it requires you to use some external tools but in time we will make it completely internal.

How Customers Can 'Download' Your App?

Once you set up a favicon, customers can now add your site to their home screen of their mobile devices. You can see examples of this here. While many are not familiar with this yet, it is slowly catching on and we plan on implementing a call out to let users know that they can do so and show them how.

Setting Up Your Favicon & App Icon

To get started, you will need a square favicon image that should be at least 260 x 260 pixels to produce the best result. You can create this using any image editing software, even paint. For the best results, you should request a designer to create one for you. Alternatively, contact us and we might be able to create one for you.

Processing Your Favicon Image

  1. Visit the following website http://realfavicongenerator.net/‚Äč

  2. Submit your image file that you created to the tool and press submit

  3. Once processed, you will be able to make some customizations to what your icon will look like on Apple, Android and Windows devices

  4. Before proceeding at the bottom under the 'Path' tab, it is very important that you check the option: "I cannot or I do not want to place favicon files at the root of my website. Instead, I will place them here"

  5. Then enter the value /pathtoicons exactly as it's written

  6. Press generate

  7. Let your files process and download your package with your images on the next page

  8. Make sure to copy and save all the text in the black code box on step 3 or keep that window open as you will need it for the next step

Uploading Your Favicons To CloudWaitress

  1. Unzip the package file you downloaded into a separate directory

  2. Open up the favicon settings page in your admin interface under the "Settings" menu

  3. Click the new favicon files uploader and select all the files in the package you unzipped

  4. In the new favicon code box, copy and paste the code that you saved from before

  5. Press the save button and let your files upload and process

You will see your new favicon image if your files uploaded successfully. If you navigate to your store you will see your new favicon active. Please note that it is quite common for your browser to not refresh your favicon unless all temporary files have been cleared as these are often stored on your device to save downloading it every time. Clear your temp files and cache to force a reload. You occasionally need to give it some time to take effect.