When you're on a website, have you ever wondered about those little icons on the tab of your browser window? They add some fun to the tab and make a website seem complete—like a pretty stamp on an envelope. I always feel like something is missing when a site doesn't have one.
As much as I notice them, and oddly care about them, there was a time when I didn’t know what they were called or how they got there. I had no idea how to build a website either so it didn’t really matter. But then I took an Adobe Dreamweaver class and was sitting by a girl who knew quite a bit about coding and website terminology. She seemed like the perfect person to get insights from. So I asked her.
“It's a favicon.”
“I'm sorry...a what?"
“Fav-i-con.”
“Oh, thank you. And how does it get there?”
“You have to add it.”
And she turned aside. So the conversation was over, but at least I knew what they were called—and I had Google.
Favicons. They’re tiny but impactful.
If you love details as much as I do and you want to be sure you don't miss an opportunity to brand your site in this way, I'll show you how to make one! It’s pretty straight forward and Squarespace makes it unbelievably easy to add to your website.
Let's get started. First, we'll talk about size and style parameters.
SIZE
Favicons are small with a final size of 32-pixels by 32-pixels. Because of the size, a simple design is ideal. Consider using a brand submark or the first letter of your logo or any symbol that you regularly use in your branding. Whatever it is, the less complicated the better. However—you should feel free to use something that's a bit complex if it fits nicely in a square area. For example, the Starbucks favicon in my round-up below is detailed, but works because it's not too tall or too wide.
STYLE
• Submark •
A great option is using a submark provided by your designer or any design that is clearly part of your brand identity. As I mentioned above, the most ideal favicons are simple and recognizable, considering they are quite small.
• Type, Shape and Color •
If you don’t already have a submark that would work well, consider using a square block of color or a simple shape that reflects your brand: would a star, heart, diamond, or circle be applicable to your brand style? Or how about the initials of your company name? Here are some favicons to inspire you:
LET'S MAKE ONE!
I use Adobe Illustrator when I create favicons for myself or for my clients, but you can also use Photoshop, or Canva, which is free. Here is how I created the favicon for my site:
Step 1 • Open a new 100px square artboard in Illustrator
Step 2 • Create the shape you want as a background. I chose a circle, but again, choose what works best for your brand. There is no need to add a background shape if you don’t want one.
Step 3 • Type the letter(s) you want to include and resize to fit over the shape
Step 4 • File > Save For Web > Choose PNG > Type Optimized if you have text. If you want to remove the white background, check the Transparency box.
Step 5 • Navigate to your Squarespace account > Choose Design > Logo & Title
Step 6 • Upload your Favicon and Save
And that’s it!
Note: it can take a few minutes for your favicon to show up—you may need to refresh your web browser a couple of times (Command + R), or even close it out and reopen.
Let me know if you have any questions!