How To Add A Favicon To Your Site

At the time of writing this, I have 26 tabs open in my browser. Yup, 26! At this point, I can’t even read what the tabs say. I’ve always been like this, too! If it weren’t for the little favicons peeking out from behind one another, I wouldn’t have any idea which tab was which.

Favi-what?

A favicon is a tiny icon that lives in the left-hand corner of an open tab. Pretty much every browser window has one. Sometimes favicons are smaller versions of a brand symbol. Other times they are a variation of a brand symbol.

Favicons are icons that can be branded and identify a business in the open tap of a web browser. They are multi-faceted and it is easy to create your own. They are one of the settings available to help your Squarespace site stand out.


Why You Need a Favicon


Professional Polish

Your own favicon gives your site a little something extra special. If you have DIY’d your site, no one will be able to tell the difference. The block box in the browser window is giveaway. Building a site is a big undertaking so, you should get credit for the hard work and financial investment you’ve put into it.

You wouldn’t leave the For Sale sign outside of a property you’ve purchased, right? The default icon tells others that your digital property - your website - is not quite your own. Since it is yours, we want to remove all signs that isn’t.

Branding

By default, a Squarespace website will have a black box displayed on the tab. This is Squarespace’s branding. While the site is yours, you’re paying for it, valuable real estate that can be used to distinguish your brand is occupied by another brand.

Take every opportunity to make your website your own. It helps to create a consistent brand experience so your business stand out from the competition. It also goes a long way in becoming a memorable brand.

Remember earlier I mentioned having a bunch of tabs open? I’m able to recognize where I am because of the favicon ;)! Make your content recognizable.

Pinterest

If Pinterest is a part of your social media marketing plan, then a favicon will help you get results. Adding a favicon to your site will add legitimacy to your site and Pinterest rewards you with the use of their rich pins feature.

The next time you’re on Pinterest, which if you’re like me it’s probably right now, take a look at a pin. You’ll notice a branded icon just underneath the pin. If you’ve ever wondered what they were, those are the pin creator’s favicon. Your branding can be associated with your pins.


How to Create a Favicon


Creating one is rather simple. The following software will help you with the creation:

  • Photoshop

  • Illustrator

  • Sketch

  • PicMonkey

  • Canva

If you’re already comfortable with one of the software selections above, you can choose any one of these to create the graphic that will become your favicon.

Here are a few tips to help you create yours:

  • Since your favicon will be quite small - it shrinks down to 16 px by 16 px - you’ll want to use design elements that are representative of your brand. A small graphic, initials, or even a mark such as a simplified logo like Target’s target symbol.

  • You’ll want to keep it simple, so focus on only one detail. A couple of letters or a single graphic will work great! Your favicon can have colors as well, and again, you’ll want to have no more than two.

  • Another thing to keep in mind is transparency. Many browser window tabs are grey by default so any negative space will show up as white. To solve this, design with transparency in mind. This will allow your favicon to blend well with browser window and pop for all the right reasons.

  • When you’ve finished with your creation, save it as a .PNG file. This will ensure that your favicon will look great in any browser window.


How to Add a Favicon to Your Site


Adding your favicon to your site in Squarespace is easy to do. Below, you will find a step-by-step guide on how to do it. There’s also a quick video that will show you how to add yours so you can see it done!

Step 1: Login to your Squarespace account. If you have more than one website on your account, select the account you’re adding the favicon to.

Step 2: From the Home menu, select DESIGN

Step 3: Navigate to Logo & Title

Step 4: Scroll down to, BROWSER ICON (FAVICON), this will be the third option

Step 5: You can either drag and drop your favicon or click inside the box to add your favicon

Step 6: Once it is added, click SAVE at the top

Step 7: Next refresh your browser window.

Voila! The default favicon is gone and now your tab is branded!

Note: Sometimes it can take a moment to appear so, if you don’t see it right away, give it a couple of minutes and refresh your window again. Should that not work, try clearing out the cache in your browser.

For a visual demonstration, check out the short video below!


Conclusion


  • Favicons are the little, branded icons that appear in the tabs of internet browser windows.

  • Adding a browser icon adds professional polish, your branding, and allows you to use rich pins on Pinterest.

  • Favicons are an easy, quick add to your Squarespace site.


related posts