Favicons -- What Are They, Why You'd Want One, How to Get One
A favicon, or favorite icon, is the tiny symbol or logo used to visually identify a URL (website address) in your browser tab or in the set of icons displayed with or without the site name in a bookmark list. Think of them as the graphic or artsy equivalent of your business face online. The top line pictured here are the websites I currently have open in my Chrome brower. Left to right they are:
Great Clips (because I'm planning on getting a haircut today)
PicMonkey
Gmail
TimeandDate
Wix
WiseWomanSeer
Orange Free Sounds
hmmm, something mysterious
Facebook
and Google Chrome's tab for opening a new site in the desktop browser
Look at that blank, dull gray tab to the left of the Facebook tab that is open to my Wix Design Experts group. That's a tab that is open to a psychotherapist's website, and, sadly, she has no favicon.
Now look at the bottom line of little favicons. That's my bookmark bar. Notice some familiar and no doubt some unfamiliar favicons there. You might not know that your bookmark bar can be edited to delete the words so you can just see the icons. Makes room for so many more sites for handy retrieval.
Why You'd Want a Favicon
Often a favicon is a smaller or cleaner version of a company logo, but you don't need a trademarked logo in order to use a favicon to identify your website.
Aside from the fact that they just look cool, if not more professional, the brain really does remember an image better and longer than a set of words. Words afterall are merely a string of symbols that are decoded into meaningful language. So a favicon is a way of reinforcing your brand image, and a way to help potential clients remember you, even if on a subconscious symbolic level.
How to Add A Favicon
Most stock photo places online provide sets of symbols like those pictured at the top of this post that can be purchased to match your website's color scheme and give a bit of graphic boost to your site's browser tab. Usually they come like this -- several to a download, so you do have to buy the whole set rather than just the one you want.
I recommend buying the vector version if that is budget friendly for you. Vectors are types of images that can be resized without losing their shape or getting blurry like normal JPG or PNG images.
You can also try access free icon-appropriate images at Pixabay.com or Vecteezy.com.
Once you have a sheet of icons, you'll need to edit the page so that you can save just the specific one you plan to use. The online tool PicMonkey.com makes cropping out unwanted parts of a photo easy. You could even then try applying a round "frame" to the icon if you want your favicon to show up as circular rather than square, as so many are.
Once you have the icon singled out and saved to your computer -- be sure to save to a folder / library where you can easily find it again -- you can then log into your Wix account and upload the favicon image. Here's how to do that:
Click the blue Manage Site button that should appear over the thumbnail image of your homepage in your Wix dashboard.
In the next screen, just below the thumbnail, click the link for Favicon.
In the next screen there should be a button for uploading your image. This feature is only offered for premium Wix website owners. If you are using a free version of Wix, it's not possible to upload a favicon.
When you click the upload image button, this will open your Wix image library, which holds the photos you (or I) have installed on your website. Locate the Upload button in the top right corner, which will open either the default picture folder or the last alternative folder you opened in your computer. Find the folder /library where you stored the image edited from PicMonkey, and double click on it to add to your website's image library.
When the image is done being added to your library, double click on it to add it as a favicon.
To test whether the favicon is loaded and to check how it looks in the browser tab, open a new tab and type in your website's URL. It should automatically appear. But if not, open return to your Wix dashboard, click on the Edit Site button and when the editing version of the website is open, click on the Publish button.
Tips for Making Your Own Favicon
If you are handy with programs like Photoshop or MS Publisher, you could create your own favicon, save as an image file, and upload to Wix as described above. Or, you could create a draft, and then hire someone from Fiverr.com to perfect it for you. Either way, I suggest these tips:
Keep it clean and simple
Notice in the photo above how most favicons that have letters, have just one. Two at most. See how the letters have strong color contrast with the background they are set against. Blue and white are common because they show up well. Red or purple and white are another good choice.
Notice that letters used are mostly san serif fonts -- not script and not serifs, which are those little tails like these that extend from most letters. San serif is used online the most because it is easier to read in small sizes.
Solids work best
Forget most shading, shadowing, and gradients. These tend to just disappear in the tiny favicon size, or end up making the image muddy looking. Simple lines are best if your favicon will be set against a transparent background. Look up at my bookmark bar at the Ancestry.com leaf and the PicMonkey head -- those are on transparent backgrounds with fairly strong leaf and head lines.
Use the favicon image in website footer
To reinforce the connection between your site's name and the favicon image, you might use it as a logo in the header, or as a nice graphic in the footer. You could use it in buttons if you like, and as graphic space fillers elsewhere around the website. Use it too on business cards to further help establish your brand's visual image.
