Favicons 101: What They Are, Why They're Great for Your Brand, and How to Add One to Your Website
Favicons are arguably one of the most forgotten about branding opportunities for small businesses. In fact, I owe you at least three high fives if you actually have one on your website right now! If you don’t, that’s okay – you’re not alone. Let’s talk through the basics of favicons: what they are, why they’re great for your brand, and how to get one added to your website ASAP.
Even if you’ve never heard of a favicon, I can guarantee you’ve seen one.
Here, I’ll prove it to you:
Look at all of the tabs you have open in your browser right now. (If you’re like me, you have 8+ hanging out at the top of your Google Chrome). See those little icons next to the title of the webpage you’re on? That right there is a favicon.
What’s A Favicon?
A favicon (a combination of the words “favorite” and “icon”) is a small image, usually a variant or piece of a business’s logo, that shows up primarily in the tab section of a web browser. Based on the name, you might also guess that the name comes from when you add a webpage to your bookmarks or favorites.
Here’s an example of all of the favicons showing up in my browser tabs right now:
You can probably guess most of the websites that I have open solely based on the icons in the tabs, right? That’s called taking advantage of visual opportunities for branding no matter how small the space.
When I say that favicons are small, I mean small. The general dimensions for a favicon are either 16x16 or 32x32 pixels. This is why you see them as portions or super-simplified versions of a brand’s primary logo. If you’re trying to fit a detailed image into your favicon, it’s not going to go so well. Scaling something intricately designed or even just a few words of copy will lead to a completely illegible icon that won’t be doing your branding any favors.
You might think, “but my designer said if I use vector formats like SVG or EPS, the design will scale without pixelating.” While you and your designer are right about how vector graphics work, favicons can’t be uploaded as vectors. Favicons have to be saved in either a PNG, GIF, or ICO file format, and all three of those are considered raster formats, which will lead to pixelation when scaling.
Tip:
If any of these terms are feeling a little too complicated for you, check out my free e-book on decoding branding jargon!
Why They’re Great for Your Brand
Most consumers make purchasing decisions based on trust. A lot of trust can be established between you and a potential customer based on how professional your business appears. Professionalism can be perceived through your brand’s visuals, values, vision, and voice. With favicons, we’re falling into brand visuals territory, which is arguably the first determining factor of a user’s opinion of your brand.
Let me be clear – I’m not saying that your brand needs to be uptight and stuffy when I say professional. I mean that your brand looks like there was both thought and time put into it. You can still be playful and whimsical with your business’s branding all while being professional.
Because of how simple it is to add a favicon to a website, you’re missing out on easy points for professionalism by not adding one. Your brand should be visible within every touch point of your business, and a favicon is an opportunity to check off another box of actively tying your business’s touch points together through your branding.
How to Add a Favicon to Your Website
Creating Your Favicon
If you don’t already have a favicon design, that’s going to be your first step. Identify a key piece of your logo that’s identifiable for your brand, and make sure you have just that portion of the design readily available. If your designer supplied you with a submark, this is a great time to use it.
Tip:
For those who don’t have access to Adobe Illustrator or Adobe Photoshop, I recommend using a free program like Canva. If you’re unsure of how to work any of these programs, I recommend working with a designer to do this.
In your preferred design program, you’ll first want to start by creating a new file with a transparent background that measures to 16x16 or 32x32 pixels. If you’re curious about resolution, go with 72 as that’s the standard for images rendered on a digital device. Now, drop in your submark or that portion of your logo that you selected into your canvas. Make sure it fills to the edges of your canvas without going over. If your design isn’t a perfect square, that’s okay! Don’t stretch and distort the image just to fill the space. If your image is wider than it is taller, make the width reach the edges. If your image is taller than wider, make the height reach the edges. Next, save the image with a transparent background as either a PNG, GIF, or ICO file. ICO is the recommended format due to it producing smaller file sizes, but it isn’t always a readily available option when saving. In these cases, I just save as a PNG but then update the file format from my Finder on Mac or File Explorer on Windows/PC.
Uploading the Favicon
This isn’t a one-size-fits-all answer, and it’s all dependent on how your website was built. Here are the support docs (with very minimal steps!) from each of the top website builders on how to add your favicon to your website:
Key Takeaways:
Adding a favicon to your website is an easy way to make your website look professional and build cohesive branding for your business.
Favicons should be a related symbol or simplified piece of your primary logo.
Favicon dimensions need to be 16x16 or 32x32 pixels.
Favicons must be saved as a PNG, GIF, or ICO, but ICO is the recommended format because of its smaller file size.
Adding a favicon to your website varies by how the website was built (Squarespace, WordPress, Wix, Shopify, hand-coded, etc.). Refer to the support docs for each platform.
Feeling like you need more help than just adding a favicon? Schedule a brand audit with me or conduct your own audit using my checklist for ideas on how to upscale your brand without a major overhaul.
