Instant Site Favicon

A favicon is a small icon that shows in a browser tab before the website name, in bookmarks, browser history, etc. It helps users identify your site when they have several tabs open in a browser:

Instant_Site_Favicon

There are two ways to upload a favicon for your Ecwid Instant site: using the logo or meta tags.

Uploading favicon via logo

If you upload a logo for your Ecwid Instant site, it’s automatically used as a favicon:

uploading instant site favicon

You can hide the logo if you want to and the favicon will still remain. First, here is how to upload a logo:

  1. From your Ecwid admin, go to Website.
  2. Click Edit:

edit instant site

  1. Go to Headline & Cover → Store logo → click Upload logo:

upload instant site logo

  1. Upload a photo from your computer that you want to use for the favicon.
  2. Save the changes.

If you want to use the favicon and hide the logo, you can do it with a CSS code:

  1. From your Ecwid admin, go to Design.
  2. Click Edit Theme if you have an active custom CSS theme or scroll down to the bottom of the page and click Create ThemeAdd new CSS Theme.
  3. Paste the following code to your CSS Theme:
div.cover__logo { display: none;}
  1. Save the changes.

Refresh the storefront page to see the changes.

Uploading favicon via meta tags

If you do not have a store logo, but you want to have a favicon, you can find or create an image for the favicon, upload it to an image hosting and then add it to the <head→ section of the store.

You can create a favicon from scratch or using another image using favicon online generators like this: https://favicon.io/

To upload a favicon for the store using meta tags:

  1. Upload your favicon to an image hosting, e.g. to https://imgbb.com/
  2. Get a direct link to the image, i.e. so that when you click on the link, the image opens:
    • If you use https://imgbb.com/ service, after the image upload, click on the image.
    • On the opened tab, click on the image with the right mouse button → Copy image URL.
  3. From your Ecwid admin, go to Website.
  4. Scroll down to the “SEO settings” section and click Add Code under Header meta tags and site verification.

upload favicon via meta tags

  1. In the appeared field, enter this code:

<link rel="shortcut icon" href="Direct_image_link">

And replace Direct_image_link with the actual link to your favicon that you copied on the image hosting:

insert favicon link in meta tags

  1. Save the changes.

Refresh the storefront page to see the added favicon.

Related articles:

How to create an awesome logo for your brand
Adding CSS codes to your store

Was this article helpful?

Awesome! Thanks for your feedback!

Sorry about that! We are here to assist you by email or chat.

Contact support