How do I add a Favicon to my site?


Note: Theme modification involves any change to the default values in the HTML or CSS of any theme or widget. Support can direct you to the correct page to make changes or to reset the widget, page HTML or CSS to its default value. This will undo any customization that may be in place. Before you create or modify a theme using HTML and CSS it is suggested to have a backup handy.

While theme modification is outside what support is allowed to assist with, if you need assistance with making modification to the theme, our implementation department is available to make these modification at an hour rate. If the service is ever needed please let us know and we will get that process started for you. Or check out our new Theme Store to find a theme that suits your needs.

A favicon is a good way to add some life to your site. This icon will display in the address bar to the left of your url, in the tab the site is loaded in, and in bookmarks in the browser. All modern browsers support favicons.

Updated Method

You can now find where to add a favicon on newer responsive themes. Navigate to Themes > Edit > Global Theme Settings and find the Custom Settings:

 

Simply upload your favicon and voila!

 

Manual Method

Step 1. Make the icon

The first step to having a favicon is to make the icon. Your site's favicon needs to be in .ico format. You can save it in gif or png format first and then convert the file at several online favicon generator sites or with desktop icon editing software.

Your icon needs to be 16x16 pixels and can optionally be transparent. You can use the following sites to convert:

Step 2. Apply the icon to your site

Add favicon.ico to your root directory

The easiest way to add the favicon to your site is to simply upload the favicon.ico file to your root directory. This is the /www directory in Spark Pay Online Stores. For some of you the root directory is the site folder at the same level as the shared folder (for example, in the screenshot below, the root directory would be "Lucas Arts Haus O Creativity"). Just place the file there and all modern browsers will automatically look for this file and use it if it finds it.

*Note: Sometimes if you have already bookmarked the page browsers will cache the default icon. It may require deleting a bookmark and clearing your cache to see the change.

*Note: Also note that the file needs to be named "favicon.ico". If not, then you would need to manually add the path in the head tags.

Troubleshooting a favicon not generating.

Sometimes it may take a few minutes for the favicon to appear once it has been uploaded correctly. Also make sure that you add the reference below to your head tags.

<link rel="shortcut icon" href="/favicon.ico" />

 

Check to see if your icon is showing at Real Favicon Generator.net and type in your site address. It will show what it looks like on all devices, as well as the formatting and if it is the correct size.

How helpful was this article?
Number of questions: 0