How to Add a Favicon to Your Squarespace Site

how-to-add-favicon

What's a favicon? A favicon is the little icon that appears on a web browser tab -- or if you want the formal definition:

Favicon - a file containing one or more small icons associated with a particular Web site or Web page. 

This may not seem like a big deal, but I think it adds a huge degree of professionalism to your site with minimal effort. 

Create your favicon

I created my favicon in Photoshop as a .png and then converted it to a .ico. While most browsers will be able to use a .png, Internet Explorer can't display a .png as a favicon (IE is a loser that you just have to deal with). You can easily convert a .png to a .ico using free online tools like this ConvertICO tool. Things to keep in mind:

  • Size: 100 x 100 px
  • Composition: Don't try to write your full blog title in this icon. It's too small. You could try just doing initials (SSE for Sweat Stretch Eat), but it usually is best to keep it as simple as possible. 
  • File type: .ico
  • Background: transparent background -- you don't want an awkward white box around your favicon

Upload your favicon to Squarespace

Thankfully, Squarespace has made it so stinkin' easy to upload your favicon. 

1. Log into your www.yourblog.com/config

2. Click the gear icon

3. Click Basic Information

4. Scroll down to Browser Icon (Favicon) and click the empty box to upload your favicon

That's it!! Seriously, it's so simple. 

Hope that helps! 

Oh, and Happy October :)