Update the Favicon on Your Branded Site

A favicon is a small, pixel icon associated with a particular website or webpage. It appears in the browser's address bar, bookmarks, and tabs, helping users quickly identify and access the site. Favicons are usually saved in the .ico, .png, or .svg format and enhance the site's branding and user experience. Here's an example:

By default, your Union branded site uses the same logo from your Union settings as the favicon. However, many users prefer to upload a separate image for the favicon since the full logo is often too detailed or large to display clearly in a browser tab. Let's take a look at how you can change this!

Visit your branded site in Union; Marketing > Branded Site

Click on Assets

Then, click on Upload Assets

You can either drag and drop your desired image or click Choose File to search for your desired image (displayed in example below).

Once your file has been added, click Create

Click the asset on the left side. You may need to scroll to the bottom to locate the snippet you'll want to copy.

In this example, I'm copying the below section

'atelier_transparent_favicon.png' | asset_url

Next, you'll want to visit your Templates, and find </> head.

There are three lines you'll be editing. For each line, you'll want to replace each line with the liquid tag you just copied. Once updated, click Save.

For example, here's what it read before...

<link rel="apple-touch-icon" sizes="180x180" href="{{ org | image_url: w: 180, h: 180 }}">
<link rel="icon" type="image/png" sizes="32x32" href="{{ org | image_url: w: 32, h: 32 }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ org | image_url: w: 16, h: 16 }}">

and in bold, you can see how it was edited.

<link rel="apple-touch-icon" sizes="180x180" href="{{ 'atelier_transparent_favicon.png' | asset_url: w: 180, h: 180 }}">
<link rel="icon" type="image/png" sizes="32x32" href="{{ 'atelier_transparent_favicon.png' | asset_url: w: 32, h: 32 }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ 'atelier_transparent_favicon.png' | asset_url: w: 16, h: 16 }}">

You can view this live by clicking your branded site link at the top!

You should see your changed favicon at the top!