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?"
“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.
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.
• 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: