Favicon for Instant Site
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.
There are two ways to upload a favicon for your Ecwid Instant site: using meta tags or using the logo. Please note that if you use the New-Gen Instant Site, you can upload the favicon via the meta tag only.
Uploading favicon via meta tags
If 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:
- Upload your favicon to an image hosting, e.g. to https://imgbb.com/
- 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.
- From your Ecwid admin, go to Website.
- Scroll down to the “SEO settings” section and click Add Code under Header meta tags and site verification.
To use Header meta tags and site verification, you need to have a paid Ecwid account.
- 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:
- Save the changes.
Refresh the storefront page to see the added favicon.
Uploading favicon via logo
If you upload a logo for your Ecwid Instant site, it’s automatically used as a favicon:
You can hide the logo if you want to and the favicon will still remain.
First, here is how to upload a logo:
- From your Ecwid admin, go to Website.
- Click Edit:
- Go to Headline & Cover → Store logo → click Upload logo:
- Upload a photo from your computer that you want to use for the favicon.
- Save the changes.
If you want to use the favicon and hide the logo, you can do it with a CSS code:
- From your Ecwid admin, go to Design.
- Click Edit Theme if you have an active custom CSS theme or scroll down to the bottom of the page and click Create Theme → Add new CSS Theme.
- Paste the following code to your CSS Theme:
div.cover__logo { display: none;}- Save the changes.
Refresh the storefront page to see the changes.
Related articles:
How to create an awesome logo for your brand
Adding CSS codes to your store