Content
At any given time in the day, I have about 20 tabs open in your browser. You can tell the different sites by the small image on each tab. Just as an example:
Google Docs:
Art Storefronts:
These icons are known as favicons. Not only can they help boost your visibility in a browser full of open tabs — they can also help strengthen your brand’s identity.
What is a favicon?
A favicon is a browser icon that represents a brand or website. Most often seen next to a web page’s title in browser tabs, favicons can also be found in address bars, bookmark lists, search results pages, toolbars, browser history, and other places across the web.
Why do favicons matter?
Favicons not only impact user experience and brand awareness, they can also make your website look more professional.
What is the Recommended Size?
The optimal size for favicons is 16x16 pixels. That’s how they appear in browser tabs, address bars, and bookmark lists. That being said, you can also add 32x32 pixels.
How to Make a Favicon
You want to make your favicon recognizable and consistent with your brand identity. So instead of starting from scratch, you should base it on your company logo.
Once you’re happy with your logo, you can start making your favicon. Unfortunately, it’s not as simple as compressing your logo into a 16x16 square and calling it a day. Your logo might have text, for example, which won’t be legible when shrunken down.
There are various ways to create a favicon. Here are a few favicon generators
Below are some of the best favicon generators on the web. With these tools, you simply upload your favicon image and it will convert the image into proper favicon formats and make it available to download. This process will only take a few minutes.
Please Note: This must be a PNG or GIF otherwise the Favicon will not work on your site.
After generating your favicon, you can save it on your device for you to use it for your Art Storefronts Site
How to Add your Favicon to your Art Storefronts Website
Navigate to your Art Storefronts Site Manager.
Click on the Jump To menu on the top-right, and select Extra Files from near the bottom of the list.
From here you’ll be able to see the files which have been uploaded to your site. To upload your favicon, click on the Add Photos button and select the favicon file to start uploading.
Once it has been uploaded, it will be added as the first file in the list.
Now we need to do two things. The first is some basic custom code to which will be added to the address of the favicon which you just uploaded, and the second is to add the favicon link to the custom code.
The custom code to be used here is as follows:
<link rel="icon" href="insert URL here" type="image/png" />
Next we’ll need to copy the url of the uploaded favicon. Click on the Copy URL link just above the thumbnail of the favicon.
With the address of the favicon copied, we can now add this to the code from above, replacing the "insert URL here" section. Your final code should look something like this:
<link rel="icon" href="https://images.discerningassets.com/image/upload/v1645827866/favicon-16x16_h724cl.png" type="image/png" />We can now go back to the main Site Manager. We can go back by clicking on the Jump To menu on the top-right, and select Site Manager at the top of the list.
In your Art Storefronts Site manager, Scroll up and click on the tab labeled Site Settings.
Under Site Settings, Click on the tab labeled Scripts.
In the Head section, add the full generated Code.
Click Save.
Once you have completed this process your Favicon should be appearing when you navigate to your site. Below is an example image of what it will look like.
