Add a Favicon to Your Website

This article is intended for advanced users and our partners as it requires advanced web development or Salesforce admin or programming knowledge. While the functionality is part of StoreConnect, we do not provide end user assistance to implement it beyond our help documentation. If you need help or are unsure on how to do this, you can hire one of our StoreConnect partners.

There are two steps to adding a favicon1 to your StoreConnect website.

  1. Upload a favicon image to the StoreConnect media library
  2. Add the favicon code to the Head Content Block

Step 1. Upload Your Favicon Image

You can upload a favicon image using the Upload Media help documentation.

Once uploaded copy the unique URL from the media object to use in the next step. The unique URL will look something like this, https://res.cloudinary.com/hzkr6fi81/image/upload/v1627259085/media/favicon.png

Step 2. Add Your Favicon Code to the Head Content Block

The favicon code will be inserted into the <head>2 tag of your online store.

Create a Head Content block3 using these instructions if you have not already done so. The Head Content block will be the location where you insert your favicon code.

Once you have created the Head Content block insert the following code:

<link rel="icon" href="https://path/favicon.png" type="image/x-icon">

Where the https://path/favicon.png is the unique URL for your favicon media object.

For example <link rel="icon" href="https://res.cloudinary.com/hzkr6fi81/image/upload/v1627259085/media/favicon.png" type="image/x-icon">

 

 

  1. favicon: A ‘favicon’ - short for favourite icon - is a website graphical icon that is used to brand a website’s URL, bookmarks, or shortcut. It is typically seen as a small graphical icon in the URL field of a web browser ↩

  2. <head> tag: Used to contain metadata such as the title of the page, its description, and any relevant keywords. Scripts (code), links to scripts and CSS files (for page styling) may also be contained in the <head> tag. ↩

  3. Content Block: Content Blocks are used to place content on your Pages and Articles. There are two types of Content Blocks 1) A Container Content Block, and 2) A Template Content Block. ↩

 
 
Back to Documentation