No matter what website platform you’re on, there are always default settings that should be updated and customize. One that we find many wedding vendors and amateur website designers forget is the icon in the menu bar. It goes by many names, including favicon, browser icon, and site icon, but we’ll call it the site icon to keep things consistent.

Changing your site icon is relatively easy on the major website platforms, however it does take some digging to find if you’re not used to the backend editor interface.

Recommendations for site icons

Before we get into the how do you add it section, let’s quickly go over the what should it look like piece.

Your site icon should be a representation of your brand that looks good in small instances. A reputable brand designer will give you multiple versions of your logo to use, from very simplistic to highly detailed. Naturally, if your logo is going to be larger it makes sense to have detail in it, but if it’s going to be in a teeny tiny little icon, all that detail is lost and it ends up just looking like a blob… not great.

The site icon should be a .png file with a transparent background. That way, the focus is on your icon and not a white box behind it. Especially since many operating systems (Mac, Windows, etc.) have both light and dark modes, your icon should be visible on both. We recommend staying away from black or white and opt for a grey or bright colour instead.

Click one of the buttons below to jump to the tutorial for your website platform!

How to set a site icon in WordPress

1. In the side menu, go to Appearance, then Customize. A new page will show up with a preview of your site.
2. Navigate to the Site Identity tab, then drag and drop or click to upload a Site Icon.

How to set a browser icon in Squarespace

1. From the home menu, select Design.
2. Navigate to Browser Icon (it’s in the third group of settings links).
3. Click to upload a browser icon.

How to set a favicon in Shopify

1. From the main dashboard, navigate to Online Store under Sales Channels in the side menu.
2. Click the Customize button beside your theme, then scroll all the way to the bottom of the page layout section to Theme Settings.
3. Select Favicon, then upload your image.

How to set a favicon in Showit

1. From the main dashboard, select Site in the side menu.
2. Navigate to Site Settings, then click to upload your Favicon.