Back to Support Design Your Site Add a Site Icon

Add a Site Icon

A Site Icon, also known as a favicon, is a unique icon for your website. This guide will show you how to add a site icon to your website.

Where Site Icons Appear

The site icon is shown on your dashboard, in your site visitors’ browser tab, as a bookmark, in mobile search results, and as a home screen app icon when saved to a browser or phone. Here are several examples:

Browser tab and search results
Site icon (favicon) on a desktop browser tab.
Site icon as the favicon on a desktop browser tab
Site icon (favicon) on a mobile device shortcut.
Site icon on a mobile device shortcut

Add a Site Icon

You can upload a Site Icon by following these steps:

  1. Starting from your dashboard, go to Settings → General.
  2. Click on Change. Your Media Library will be shown. Note that you may need to click on Site Identity before being able to open the Media Library, depending on your theme.
  3. Choose an existing image or upload a new one.
  4. Click Continue. You may then be given an option to crop the image to make sure it’s square. You can also skip the cropping step if you wish.
  5. Click the Done button when you’re happy with the icon, and your changes will be saved automatically.

Site Icon Image Guidelines

Upload a square image that is at least 512 x 512 pixels.

PNG and SVG image file types are the most common. Any valid favicon format is supported.

Here are some actionable tips you can follow:

  1. Keep it simple. Remember, you don’t have a lot of space to play around with!
  2. Keep it recognizable. Try and encapsulate your brand in the small space you have to work with. If you’re used to using a logo that isn’t a tiny square, try and create something that evokes that logo rather than unnecessarily trying to squeeze the whole original in.
  3. Use as little text or lettering as possible. Remember that the favicon is a small image. Even if your usual logo has your company name spelled out, try to keep it concise in your favicon.
  4. Think about color. Different web browsers (like Google Chrome, Android Chrome, Safari, and Edge) use different color palettes. And, with the increasing popularity of night mode, you’ll want to make sure your favicon looks great regardless of the user’s browser. All you have to do is ensure that the favicon looks good and stands out at least on white, gray, and black background colors.

Remove a Site Icon

You can remove a custom Site Icon by going to General → Settings and clicking on the Remove button.

Was this guide helpful for you?

Not quite what you're looking for? Get Help!

Copied to clipboard!